Vue awesome swiper not work properly in vue js modal plugin

Question

I'm using vue-js-modal for product quick view and I'm trying to create an image gallery with vue-awesome-swiper but the problem is outside this modal image gallery work fine as I am aspected but inside the modal plugin it shows me an error and does not work properly

I do not find any solution on this topic please help me any body

My code is below

<template>
 <modal name="quick-view" width="90%" height="auto" :maxWidth="1000" :maxHeight="600" :adaptive="true">
  <div class="modal-content-wrapper">
   <button @click="hide" class="modal-close">Close me</button>

   <div class="product-details">
    <div class="product-carousel">
      <!-- swiper1 -->
     <swiper class="swiper gallery-top" :options="swiperOptionTop" ref="swiperTop">
      <swiper-slide>
       <img src="https://res.cloudinary.com/redq-inc/image/upload/c_fit,q_auto:best,w_300/v1589614568/pickbazar/grocery/GreenLimes_jrodle.jpg" alt="">
      </swiper-slide>
      <swiper-slide>
       <img src="https://res.cloudinary.com/redq-inc/image/upload/c_fit,q_auto:best,w_300/v1589614568/pickbazar/grocery/Yellow_Limes_y0lbyo.jpg" alt="">
      </swiper-slide>
      <swiper-slide>
       <img src="https://res.cloudinary.com/redq-inc/image/upload/c_fit,q_auto:best,w_300/v1589614569/pickbazar/grocery/RedCherries_zylnoo.jpg" alt="">
      </swiper-slide>
      <swiper-slide>
       <img src="https://res.cloudinary.com/redq-inc/image/upload/c_fit,q_auto:best,w_300/v1589614568/pickbazar/grocery/CelerySticks_ulljfz.jpg" alt="">
      </swiper-slide>
     </swiper>

      <!-- swiper2 Thumbs -->
     <swiper class="swiper gallery-thumbs" :options="swiperOptionThumbs" ref="swiperThumbs">
      <swiper-slide>
       <img src="https://res.cloudinary.com/redq-inc/image/upload/c_fit,q_auto:best,w_300/v1589614568/pickbazar/grocery/GreenLimes_jrodle.jpg" alt="">
      </swiper-slide>
      <swiper-slide>
       <img src="https://res.cloudinary.com/redq-inc/image/upload/c_fit,q_auto:best,w_300/v1589614568/pickbazar/grocery/Yellow_Limes_y0lbyo.jpg" alt="">
      </swiper-slide>
      <swiper-slide>
       <img src="https://res.cloudinary.com/redq-inc/image/upload/c_fit,q_auto:best,w_300/v1589614569/pickbazar/grocery/RedCherries_zylnoo.jpg" alt="">
      </swiper-slide>
      <swiper-slide>
        <img src="https://res.cloudinary.com/redq-inc/image/upload/c_fit,q_auto:best,w_300/v1589614568/pickbazar/grocery/CelerySticks_ulljfz.jpg" alt="">
      </swiper-slide>
     </swiper>
    </div>
    <div class="p-10">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aspernatur at, 
      dignissimos dolorum enim ex expedita fuga harum.
    </div>
   </div>
  </div>
 </modal>
</template>


<script>
  import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
  import 'swiper/css/swiper.css'

  export default {
    name: "Products",
    components : {
      Swiper, SwiperSlide
    },
    data() {
     return {
        swiperOptionTop: {
        loop: true,
        loopedSlides: 5, // looped slides should be the same
        spaceBetween: 10,
      },
      swiperOptionThumbs: {
        loop: true,
        loopedSlides: 5, // looped slides should be the same
        spaceBetween: 10,
        centeredSlides: true,
        slidesPerView: 'auto',
        touchRatio: 0.2,
        slideToClickedSlide: true
      }
     }
    },
    mounted() {
      this.$nextTick(() => {
      const swiperTop = this.$refs.swiperTop.$swiper
      const swiperThumbs = this.$refs.swiperThumbs.$swiper
      swiperTop.controller.control = swiperThumbs
      swiperThumbs.controller.control = swiperTop
    })
   },

   methods : {
     show () {
       this.$modal.show('quick-view');
     },
     hide () {
       this.$modal.hide('quick-view');
     }
   }
 }
</script>

Answer 1

You have to use an event for ref work use @opened event Emits after modal became visible or started a transition. see this plugin events here

<template>
  <modal name="quick-view" width="90%" height="auto" :maxWidth="1000" :maxHeight="600" :adaptive="true"
             @opened="opened"
        >
        
    ............

  </modal>
</template>

<script>
 export default {
   methods: {
    opened() {
     this.$nextTick(() => {
       const swiperTop = this.$refs.swiperTop.$swiper
       const swiperThumbs = this.$refs.swiperThumbs.$swiper
       swiperTop.controller.control = swiperThumbs
       swiperThumbs.controller.control = swiperTop
     })
    }
   }
  }
</script>