Swiper Thumbs gallery 无法同步的问题

有一个 Swiper Thumbs gallery 的需求,但是 copy 官方示例后,发现两个 swiper 始终无法联动,代码如下:

<swiper
      :navigation="true"
      :thumbs="{ swiper: thumbsSwiper }"
      :modules="modules"
      class="landmark-swiper-wrapper"
      :style="{
        '--swiper-navigation-color': '#fff',
        '--swiper-pagination-color': '#fff',
        '--swiper-pagination-bullet-inactive-opacity': '.5'
      }"
    >
      <template v-for="(item, index) in data.imgUrls" :key="index">
        <swiper-slide>
          <img :src="item" />
        </swiper-slide>
      </template>
    </swiper>
    
// swiper
let thumbsSwiper = null
const setThumbsSwiper = (swiper: any) => {
  thumbsSwiper.value = swiper
}
console.log('🚀 -> thumbsSwiper', thumbsSwiper) // null 这儿 thumbsSwiper为 null
// 这儿打印 thumbsSwiper 为 null

// 解决办法: 将 thumbsSwiper 设为响应式的数据就好了
// swiper
let thumbsSwiper = ref(null) // 重点
const setThumbsSwiper = (swiper: any) => {
  console.log('🚀 -> setThumbsSwiper -> swiper', swiper)
  thumbsSwiper.value = swiper
}