使用vue-awesome-swiper构建slider组件时报错

Question

第一步：全局引入

import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)

第二步：创建组件，组件的代码如下

<template>
    <swiper :option="swiperOption" ref="mySwiper">
      <swiper-slide>Slide 1</swiper-slide>
      <swiper-slide>Slide 2</swiper-slide>
      <swiper-slide>Slide 3</swiper-slide>
      <swiper-slide>Slide 4</swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
</template>

<script>
  import { Swiper, SwiperSlide } from "vue-awesome-swiper"
  import 'swiper/dist/css/swiper.css'
  
  export default {
    components: {
      Swiper,
      SwiperSlide
    },
    data() {
      return {
        swiperOption: {  
          pagination: '.swiper-pagination',  
          slidesPerView: 'auto',  
          centeredSlides: true,  
          paginationClickable: true,  
          spaceBetween: 30,  
              onSlideChangeEnd: swiper => {   
                  this.page = swiper.realIndex+1;  
                  this.index = swiper.realIndex;  
              } 
          },
        swiperSlides: [1, 2, 3, 4, 5]
      }
    },
    computed: {  
      swiper() {  
        return this.$refs.mySwiper.swiper;  
      }  
    },
    mounted() {
      this.swiper.slideTo(0, 0, false); 
    }
  }
</script>

<style></style>

这时，编译是成功的

那么，问题来了，浏览器debugger中报错了