vue+element 使用swiper自动轮播不生效、小圆点不显示

直接上代码
1、下载依赖（不带版本号会缺少文件）

npm install vue-awesome-swiper@2.6.7 --save

2、main.js 引入

import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'vue-awesome-swiper/node_modules/swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)

3、在单页面中使用

//dom层
<swiper ref="mySwiper" class="swiperbox" :options="swiperOption">
            <swiper-slide class="swiper-slide">
              1
            </swiper-slide>
            <swiper-slide class="swiper-slide">
              <img src="../assets/images/swiper1.png" alt />
           2
            </swiper-slide>
            <swiper-slide class="swiper-slide">
             3
            </swiper-slide>
            <!-- 分页器 -->
            <div class="swiper-pagination" slot="pagination"></div>
          </swiper>
//return data

 swiperOption: {
        
        //分页
          pagination: '.swiper-pagination',
         //点击切换
         paginationClickable: true,
          //自动播放时间
          autoplay:2000,
          //切换速度，即slider自动滑动开始到结束的时间（单位ms），也是触摸滑动时释放至贴合的时间。
          speed:2000,
         //复制slide，看起来是循环的
         loop:true,
         //用户操作swiper之后，是否禁止autoplay.默认为true：停止。
         autoplayDisableOnInteraction:false,
        //拖动释放时不会输出信息，阻止click冒泡。拖动Swiper时阻止click事件。
        preventLinksPropagation:true
        
      }