解决使用vue-awesome-swiper组件手动滚动点击失效问题

<script>
    import {
        swiper,
        swiperSlide
    } from "vue-awesome-swiper";
    var vm = null;
    export default {
        data() {
            return {
                swiperOption: {
                    notNextTick: true,
                    //循环
                    loop: true,
                    //设定初始化时slide的索引
                    initialSlide: 0,
                    //自动播放
                    autoplay: true,
                    autoplay: {
                        delay: 3000,
                        stopOnLastSlide: false,
                        disableOnInteraction: false,
                    },
                    // 设置轮播
                    effect: '',
                    //滑动速度
                    speed: 800,
                    //滑动方向
                    direction: 'horizontal',
                    //小手掌抓取滑动
                    // grabCursor : true,
                    //滑动之后回调函数
                    on: {
                        slideChangeTransitionEnd: function() {
                            console.log(this.activeIndex);
                            //切换结束时，告诉我现在是第几个slide
                            //                             const realIndex = this.activeIndex;
                            //                             vm.carousel(realIndex);
                        },
                        click: function() {
                          // 这里有坑，需要注意的是：this 指向的是 swpier 实例，而不是当前的 vue， 因此借助 vm，来调用 methods 里的方法 
                          // console.log(this); // -> Swiper
                          // 当前活动块的索引，与activeIndex不同的是，在loop模式下不会将 复制的块 的数量计算在内。
                            console.log('ss'+this.realIndex)
                            const realIndex = this.realIndex;
                            vm.carousel(vm.carousels[realIndex]);
                        }
                    },
                    //左右点击
                    //                  navigation: {
                    //                      nextEl: '.swiper-button-next',
                    //                      prevEl: '.swiper-button-prev',
                    //                  },
                    //分页器设置         
                    pagination: {
                        el: '.swiper-pagination',
                        clickable: true
                    }
                },
                swiperSlides: [1, 2, 3, 4],
                activeIndex: 0,
                carousels:[]
            }
        },
        components: {
            swiper,
            swiperSlide
        },
        computed: {
            swiper() {
                return this.$refs.mySwiper.swiper;
            }
        },
        created() {
            vm = this;
        },
        methods: {
            carousel(type) {
                if (type.url !== null) {
                    this.$router.push(type.redirect_to);
                } 
            }
        }
    }