vue中使用swiper出現loop和autoplay失效問題

在vue中使用了swiper，結果出現了一系列的bug，在代碼中修改能夠使swiper中的屬性正常運行，但是只要一刷新頁面，swiper所有的屬性就都不好使了。
究其原因，發現原來是在 new Swiper 的時候出了問題，簡單的加一個setTimeout就好啦！話不多說，上代碼：

<template> 

<div v-if="bannerList.length">
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="(item, index) in bannerList" :key="index">
        <a :href="item.banner_url">
          <img :src="item.banner_img" style="width: 100%;"/>
        </a>
      </div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev swiper-button-white"></div>
    <div class="swiper-button-next swiper-button-white"></div>
  </div>
</div>

</template>
mounted() {
      this.$nextTick(() => {
        this.initSwiper()
      })
    },
    methods: {
      initSwiper () {
        setTimeout(()=>{
          this.mySwiper=new Swiper('.swiper-container', {
            loopAdditionalSlides: 3,
            loop: true,
            speed: 2000,
            autoplay: {// 自動滑動
              delay: 1000, //1秒切換一次
              disableOnInteraction: false
            },
            pagination: {// 如果需要分頁器
              el: '.swiper-pagination',
              clickable: true,
            },
            navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev',
            },
            observer: true, // 啟動動態檢查器(OB/觀眾/觀看者)
            observeParents: true // 修改swiper的父元素時，自動初始化swiper
          });
        },300)
      }
    },