vue swiper click失效

HTML部分

<swiper :options="bannerOption" class="ba_s" ref="bannerSwiper" v-if="bannerList.length>0">
        <swiper-slide  v-for="(item,index) in bannerList" :key="index"><img :src="item.bannerImg" alt="" /></swiper-slide>
       <div class="swiper-pagination"  slot="pagination"></div>
 </swiper>

在 loop 开启的时候，dom 绑定事件是有问题的。因为在loop模式下slides前后会复制若干个slide，从而形成一个环路，但是却不会复制绑定在dom上的click事件。
在swiper中的回调函数添加click事件。
js部分

   import 'swiper/dist/css/swiper.css';
      import { swiper, swiperSlide } from 'vue-awesome-swiper';
      // import Swiper from 'swiper'
      import vueAccordion from './accordion/vue-accordion';
      let vm = null;
        export default {
            name: 'index',
            data () {
              return {
        //       
                bannerOption: {
                  // init:false,
                  pagination: {
                    el: '.swiper-pagination',
                  },
                  autoplay: {
                  delay: 3000,
                  stopOnLastSlide: false,
                  disableOnInteraction: false,
                  },
                  loop: true,
                  notNextTick: true,
                  observer:true,//修改swiper自己或子元素时，自动初始化swiper
                  observeParents:true,//修改swiper的父元素时，自动初始化swiper
                  on:{
                    click: function(e){
                      const realIndex = this.realIndex;
                      vm.toBannerDetail(realIndex)    //要执行函数
                    }
        
                  },
                },
           
          }
        },
        created () {
          vm = this;
        }