H5轮播图swiper，swiper组件内部数据不显示

H5用的是vue-awesome-swiper

需求是改为自动轮播，且轮播到最后一个，下一个就是第一个轮播图。

问题：改为自动轮播之后，swiper上的通过data计算过的数据，不显示了。

解决办法：在created里面提前计算好，而不是在mounted中进行。因为若采用自动轮播，swiper在组件加载完成后，自动复制前后swiper的单项，所以在created之后处理数据比较合适。Mounted之后有可能会有异常。

<swiper class="swiper" v-if=" dataSource.length > 1" :options="swiperOption" ref="mySwiper">
    <swiper-slide v-for="item in dataSource" :key="item.courseId" :class="`slider-${item.courseId}`">
        <nuxt-link :to="to(item)">             
        <BannerCourse :dataSource="item" :key="item.courseId" />
        </nuxt-link>
    </swiper-slide>
</swiper>

<template>
  <div class="slider-box">
      <img :src="xxx" class="slider-main-img" />
      <div :class="'submit-btn submit'+btnTemplate.color">
          {{btnTemplate.text}}
      </div>
  </div>
</template>

created(){
    this.pageLoad();    
  }
  mounted() {
     ///this.pageLoad();      

  }