奇怪的行为 vue swiper 滑块

Question

我有几组照片，照片块是滑动滑块。此滑块处于默认状态。

然后，当我打开 Block2 时，滑块显示不正确。显示一张大图。

但是当我打开模态时，滑块显示正确，关闭后也正确显示。

我使用 vuetify 和 pug：

布局

v-expansion-panels(:value="[0]" multiple )
        v-expansion-panel(v-for="(item, index) in displayedPosts" :key="index")
          v-card
            v-expansion-panel-header
              v-card-title {{item.title}}
            v-expansion-panel-content(v-for="(el, index) in item.checks" :key="index")
              v-card-subtitle {{el.date}}
              m-gallery-slider(:files="el.files")

m-gallery-slider

<template lang="pug">
      v-container(fluid)
        swiper(ref="mySwiper" :options="swiperOptions" v-model="slider")
          swiper-slide(v-for="(item,index) in files" :key="index")
            v-img(:src="item.download_url" @click="slider = index, dialog = true")
            p {{item.indicator}}
            p {{item.comment}}
        v-dialog(v-model="dialog")
            v-img(:src="files[slider].download_url")
</template>

<script>
export default {
  name: "m-gallery-layout",
data() {
    return {
      slider: 0,
      dialog: false,
      swiperOptions: {
        slidesPerView: 4,
        spaceBetween: 20,
        centeredSlidesBounds: true,
        grabCursor: true,
    breakpoints: {
      1600: {
        slidesPerView: 7,
        spaceBetween: 20
      },
      1024: {
        slidesPerView: 4,
        spaceBetween: 40
      },
      768: {
        slidesPerView: 3,
        spaceBetween: 30
      },
      640: {
        slidesPerView: 2,
        spaceBetween: 20
      },
      320: {
        slidesPerView: 1,
        spaceBetween: 10
      }
    }
      }
    }
  },
  props: {
    files: Array
  }
  computed: {
    swiper() {
      return this.$refs.mySwiper.$swiper
    }
  },
  mounted() {
    this.swiper.slideTo(0, 1000, false)
  },
</script>

我做错了什么？

"swiper": "^5.4.5",
"vue-awesome-swiper": "^4.1.1",