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)
      }
    },