vue-awesome-swiper怎么在同一個Vue頁面使用多個swiper?

想要在同一個vue做多個輪播切換，而且想要獲得每一個swiper當前所切換到的activeIndex。
單個的時候知道怎么獲取activeIndex，但是有多個的時候要怎么做？怎么去區(qū)分它們？

<template>
<div>
<swiper  :options="swiperOption" ref="mySwiper">
<swiper-slide v-for="(item,index) in listdata" :key="index"> 
{{item}}
 </swiper-slide>   
</swiper>   
</div>
</template>

import 'swiper/dist/css/swiper.css';
import { swiper, swiperSlide } from 'vue-awesome-swiper';
export default {
    components:{
        swiper, 
        swiperSlide
    },
    data(){
       return{
             swiperOption: {
                pagination: {
                    el: '.swiper-pagination'
                },
                on:{
                    slideChangeTransitionEnd:()=>{
                        console.log(this.swiper.activeIndex)
                        } 
                    }
            },
       } 
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.swiper;
      }
    }
 }