Как правильно инициализировать swiper thumbs внутри цикла v-for?

Для инициализации swiper thumbs внутри цикла v-for вам необходимо создать экземпляр Swiper для каждого слайдера и привязать его к соответствующему элементу внутри цикла.

Вот пример, как можно реализовать это во Vue.js:

1. В шаблоне добавьте контейнер для превьюшек и элементы превьюшек с использованием v-for:

```html
<template>
  <div>
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div v-for="(slide, index) in slides" :key="index" class="swiper-slide">
          <!-- Содержимое слайда -->
        </div>
      </div>
      <div class="swiper-pagination"></div>
    </div>

    <div v-for="(slide, index) in slides" :key="index" class="swiper-container thumbs">
      <div class="swiper-wrapper">
        <div v-for="(thumb, thumbIndex) in slide.thumbs" :key="thumbIndex" class="swiper-slide" @click="showSlide(index, thumbIndex)">
          <!-- Контейнер превьюшки -->
        </div>
      </div>
    </div>
  </div>
</template>
```

2. В компоненте добавьте логику инициализации экземпляров Swiper для основного слайдера и превьюшек:

```javascript
<script>
import Swiper from 'swiper';

export default {
  data() {
    return {
      slides: [
        {
          // Данные для слайда 1
          thumbs: [
            // Данные для превьюшек слайда 1
          ],
        },
        {
          // Данные для слайда 2
          thumbs: [
            // Данные для превьюшек слайда 2
          ],
        },
        // ...
      ],
    };
  },

  mounted() {
    // Инициализация Swiper для основного слайдера
    new Swiper('.swiper-container', {
      // Параметры конфигурации Swiper
      pagination: {
        el: '.swiper-pagination',
      },
    });

    // Инициализация Swiper для превьюшек
    this.slides.forEach((slide, index) => {
      new Swiper(`.thumbs:nth-child(${index+1}) .swiper-container`, {
        // Параметры конфигурации Swiper для превьюшек
      })
    });
  },

  methods: {
    showSlide(slideIndex, thumbIndex) {
      // Логика открытия соответствующего слайда при клике на превьюшку
      const mainSwiper = document.querySelector('.swiper-container').swiper;
      mainSwiper.slideTo(slideIndex);

      const thumbsSwipers = document.querySelectorAll('.thumbs .swiper-container');
      thumbsSwipers.forEach((thumbsSwiper, index) => {
        if (index === slideIndex) {
          thumbsSwiper.slideTo(thumbIndex);
        } else {
          thumbsSwiper.slideTo(0);
        }
      });
    },
  },
};
</script>
```

В этом примере мы инициализируем основной слайдер и превьюшки в методе `mounted`, используя селекторы классов `.swiper-container` и `.thumbs .swiper-container`. Затем, при клике на превьюшку вызывается метод `showSlide`, который указывает основному слайдеру перейти к соответствующему слайду, а превьюшкам - к соответствующей превьюшке.

Убедитесь, что у вас установлена библиотека Swiper и добавлены стили для Swiper в вашем проекте.