0xD34F

Что значит "основной"? Показываемый при инициализации? Если так, то

data: () => ({
  swiperOptions: {
    initialSlide: здесь номер слайда,
  },
}),

<swiper :options="swiperOptions">

function updateClasses({ $el, slides, activeIndex }) {
  $el.find('.swiper-slide-prev-prev').removeClass('swiper-slide-prev-prev');
  slides.eq(activeIndex).prev().prev().addClass('swiper-slide-prev-prev');

  $el.find('.swiper-slide-next-next').removeClass('swiper-slide-next-next');
  slides.eq(activeIndex).next().next().addClass('swiper-slide-next-next');
}

on: {
  init() {
    updateClasses(this);
  },
  slideChange() {
    updateClasses(this);
  },
},

https://swiperjs.com/demos#pagination-fraction

slideToClickedSlide: true

on.slideChange + slideTo

https://jsfiddle.net/4kgnz2x6/

Конструктор поддерживает инициализацию сразу нескольких экземпляров, так что просто укажите первым параметром селектор, который будет соответствовать сразу всем пяти корневым элементам ваших слайдеров.

function updateFraction(slider) {
  const { params, activeIndex } = slider;

  slider.$el
    .find(`.${params.pagination.currentClass}`)
    .text(`${activeIndex + 1} - ${activeIndex + params.slidesPerView}`);

  slider.$el
    .find(`.${params.pagination.totalClass}`)
    .text(slider.slides.length);
}

on: {
  init() {
    setTimeout(updateFraction, 0, this);
  },
  slideChange() {
    updateFraction(this);
  },
  resize() {
    updateFraction(this);
  },
},

https://jsfiddle.net/1xLrtyqw/

function initSlider(el) {
  if (!(el instanceof HTMLElement)) {
    el = document.querySelector(el);
  }

  const slider = new Swiper(el.querySelector('.product-slider'), {
    navigation: {
      nextEl: el.querySelector('.swiper-button-next'),
      prevEl: el.querySelector('.swiper-button-prev'),
    },
    spaceBetween: 10,
  });

  const thumbs = new Swiper(el.querySelector('.product-thumbs'), {
    spaceBetween: 5,
    centeredSlides: true,
    slidesPerView: 4,
    touchRatio: 0.2,
    slideToClickedSlide: true,
    direction: 'vertical',
  });

  slider.controller.control = thumbs;
  thumbs.controller.control = slider;

  return { slider, thumbs };
}


const
  first = initSlider('.container-first'),
  second = initSlider('.container-second');

document.querySelector('.set-slide').addEventListener('click', () => {
  second.slider.slideTo(first.slider.realIndex);
});

document.querySelectorAll('.container').forEach(n => {
  const slider = new Swiper(n.querySelector('.product-slider'), {
    navigation: {
      nextEl: n.querySelector('.swiper-button-next'),
      prevEl: n.querySelector('.swiper-button-prev'),
    },
    spaceBetween: 10,
  });

  const thumbs = new Swiper(n.querySelector('.product-thumbs'), {
    spaceBetween: 5,
    centeredSlides: true,
    slidesPerView: 4,
    touchRatio: 0.2,
    slideToClickedSlide: true,
    direction: 'vertical',
  });

  slider.controller.control = thumbs;
  thumbs.controller.control = slider;
});

Оборачиваете код в

document.querySelectorAll('.gallery').forEach(n => {

});

, заменяете '.gallery-thumbs' и '.gallery-top' на n.querySelector('.gallery-thumbs') и n.querySelector('.gallery-top') соответственно.

Этот компонент - всего лишь обёртка над собственно swiper'ом. Который для создания бесконечной прокрутки делает копии слайдов (последнего, предпоследнего и т.д. перед первым; первого, второго и т.д. после последнего). При копировании элемента обработчики событий не копируются (кроме инлайновых, но, очевидно, тут другой случай). Отсюда "клик не срабатывает" - когда вы кликаете по клонированному слайду.

Делегируйте обработку событий. Обработчик клика будет один, и прицеплен к корневому элементу слайдера:

<swiper @click="onClick"

methods: {
  onClick(e) {
    const slide = e.target.closest('.swiper-slide');
    if (slide) {
      console.log(`slide ${slide.dataset.swiperSlideIndex} clicked`);
    }
  },

https://jsfiddle.net/5gzypshw/2/

const swiperOptions = {
  ...
  on: {
    'init resize slideChangeTransitionStart'() {
      $('.swiper-pagination').css({
        top: $('.swiper-slide-active .head').height() + 30, /* или 40, или 50, или...
                                                             * на ваше усмотрение, это чтобы
                                                             * пагинация была чуть ниже заголовка,
                                                             * а не залезала на него
                                                             */
      });
    },
  },
};

Думаю, вместо клепания собственного велосипеда, будет лучше воспользоваться каким-нибудь готовым компонентом.

Попробуйте заменить

el: '.slidernav'

на что-то вроде

el: this.querySelector('.slidernav')

Ну, то есть - найдите элемент пагинации текущего слайдера вместо того, чтобы указывать сразу все для всех.

Так?

slidesPerView: 4,
slidesPerGroup: 4