使用vue-awesome-swiper 插件問題

輪播效果是第一頁是顯示 side1 和side2,然后 轉(zhuǎn)到下一頁是空白頁，并不是第一頁顯示side1，第二頁顯示side2 ，哪里出錯了？

代碼：

<template>
<div>

<swiper :options="swiperOption" ref="mySwiper">
  <!-- 幻燈內(nèi)容 -->
  <swiper-slide>slide1</swiper-slide>
  <swiper-slide>slide2</swiper-slide>
  <!-- 以下控件元素均為可選 -->
  <div class="swiper-pagination" slot="pagination"></div>
  <div class="swiper-button-prev" slot="button-prev"></div>
  <div class="swiper-button-next" slot="button-next"></div>
  <div class="swiper-scrollbar"  slot="scrollbar"></div>
</swiper>

</div>
</template>
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default{

components: {
  swiper,
  swiperSlide
},
data () {
  return {
    swiperOption: {
      notNextTick: true,
    //  loop: true,
      pagination: '.swiper-pagination',
      slidesPerView: 'auto',
      centeredSlides: true,
      autoplay: 3000,
      paginationClickable: true,
      spaceBetween: 10,
      onSlideChangeEnd: swiper => {
        this.page = swiper.realIndex + 1
        this.index = swiper.realIndex
      }
    }
  }
},
computed: {
  swiper () {
    return this.$refs.mySwiper.swiper
  }
},
mounted () {
 // this.swiper.slideTo(0, 0, false)
}

}
</script>