我用vue寫一個輪播圖但是分頁的圓點沒有顯示
我的代碼如下：

<template>
  <div class="hello">
    <swiper :options="swiperOption" class="swiper-wrap" v-if="swiper.length" ref="mySwiper">
      <swiper-slide v-for="item in swiper" :key="item.id">
        <img :src="item.imgUrl" alt=""/>
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
    <v-footer></v-footer>
  </div>
</template>
<script>
import footer from '@/components/footer/footer.vue'
import {swiper, swiperSlide} from 'vue-awesome-swiper'
import infiniteScroll from 'vue-infinite-scroll'
export default {
  name: 'home',
  components: {
    'v-footer': footer,
    swiper,
    swiperSlide
  },
  data () {
    return {
      swiper: [
        {id: 1, imgUrl: '/static/img/home/banner1.png'},
        {id: 2, imgUrl: '/static/img/home/banner.png'},
        {id: 3, imgUrl: '/static/img/home/banner1.png'},
        {id: 4, imgUrl: '/static/img/home/banner.png'}
      ],
      swiperOption: {
        pagination: '.swiper-pagination',
        slidesPerView: 'auto',
        centeredSlides: true,
        paginationClickable: true,
        spaceBetween: 30
      }
    }
  },
  computed: {
    mySwiper () {
      return this.$ref.mySwiper.swiper
    }
  },
  directives: {infiniteScroll}
}
</script>
<style lang="scss">
@import 'static/css/swiper.min';
@import 'static/css/home';
</style>