Swipper contoller thumb in loop ( async )

<swiper :options="swiperOptionTop" class="gallery-top" ref="swiperTop">
                <swiper-slide v-for="(slide,index) in swiperSlides" :key="index" :class="'slide-' + slide.id">
                  <img alt="" :src="slide.img">
                </swiper-slide>
               <div class="swiper-button-next swiper-button-white" slot="button-next"></div>
               <div class="swiper-button-prev swiper-button-white" slot="button-prev"></div>
             </swiper>
             <!-- swiper2 Thumbs -->
             <swiper :options="swiperOptionThumbs" class="gallery-thumbs" ref="swiperThumbs">
               <swiper-slide v-for="(slide,index) in swiperSlides" :key="index" :class="'slide-' + slide.id">
                 <img alt="" :src="slide.img">
               </swiper-slide>
             </swiper>

  data () {
    return {
      swiperOptionTop: {
        spaceBetween: 10,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      },
      swiperOptionThumbs: {
        spaceBetween: 10,
        centeredSlides: false,
        slidesPerView: 'auto',
        touchRatio: 0.2,
        slideToClickedSlide: true
      },
      swiperSlides: [
        {id: 1, img: '/static/images/products/product_01.jpg'},
        {id: 2, img: '/static/images/products/product_02.jpg'},
        {id: 3, img: '/static/images/products/product_03.jpg'}
      ],
      swiperSlidesThumb: [
        {id: 1, img: '/static/images/products/product_01.jpg'},
        {id: 2, img: '/static/images/products/product_02.jpg'},
        {id: 3, img: '/static/images/products/product_03.jpg'}
      ]
    }
  },
  mounted () {
    this.$nextTick(() => {
      const swiperTop = this.$refs.swiperTop.swiper
      const swiperThumbs = this.$refs.swiperThumbs.swiper
      swiperTop.controller.control = swiperThumbs
      swiperThumbs.controller.control = swiperTop
    })
  }