vue项目中swiper动态更新后无法轮播问题 附带案例代码

<div class="swiper-container" v-if="markInfo.attachs && markInfo.attachs.length!=0">
    <div class="swiper-wrapper">
       <div class="swiper-slide" v-for="item in markInfo.attachs">
           <img :src="item.url" alt="" height="100%">
        </div>
     </div>
     <!-- 如果需要分页器 -->
     <div class="swiper-pagination"></div>
     <!-- 如果需要导航按钮 -->
     <div class="swiper-button-prev"></div>
      div class="swiper-button-next"></div>
</div>

methods: {
  initSwiper () {
     let _this = this
     _this.mySwiper = null
     _this.mySwiper = new Swiper('.swiper-container', {
          autoHeight: true, //enable auto height
          spaceBetween: 20,
          pagination: {
             el: '.swiper-pagination',
             clickable: true,
          },
          navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev',
         },
    })
  }
}

Commons.signals.changeSwiper.add((mark) => {
     _this.markInfo = mark //这块数据修改后，for循环会自动修改数据，但是并不会轮播，所以需要下边的代码重新渲染
     if(mark.attachs && mark.attachs.length!=0){//没有数据不重新渲染
         // DOM更新了
         _this.$nextTick(() => {
           _this.initSwiper()// swiper重新初始化
         })
      }
})

_this.mySwiper.removeAllSlides()
_this.markInfo.attachs.forEach((el, index) => {
    _this.mySwiper.appendSlide('<div class="swiper-slide"><img src="'+el.url+'" alt="" height="100%"></div>'); //加到Swiper的最后
 })

_this.mySwiper.distory(false)
_this.initSwiper()// swiper重新初始化