Swiper breaks when I change the localization

[ilgarabdullazade]

I've encountered an issue where the Swiper component breaks when I attempt to change the localization (language or regional settings) on my project. This issue is causing functionality problems and unexpected behavior in my application.

import { ApiEndpoints } from '~/utils/apiEndpoints'

const { data: testimonials, pending } = await useMyFetch<Testimonial[]>(
  ApiEndpoints.TESTIMONIALS,
  {
    server: false,
  }
)
const isMobile = useMediaQuery('not all and (min-width: 1024px)')

const onSwiperInit = (swiper: any) => {
  const { initDOM } = useAfterOutIn(() => {
    swiper.pagination.enable()
  })
  initDOM()
}
</script>

<template>
  <SiteSkeletonSection v-if="pending" :items="isMobile ? 1 : 2" />
  <section v-else class="testimonials">
    <div v-if="testimonials?.length" class="testimonials__wrapper">
      <SiteTitle class="testimonials__title">{{
        $t('testimonials.title')
      }}</SiteTitle>
      <div class="testimonials__body">
        <Swiper
          @swiper="onSwiperInit"
          class="testimonials__swiper"
          :modules="[SwiperAutoplay, SwiperPagination]"
          :slides-per-view="1"
          :pagination="{
            el: '.testimonials__pagination',
            clickable: true,
          }"
          :breakpoints="{
            '1024': {
              slidesPerView: 2,
              spaceBetween: 10,
            },
          }"
        >
          <SwiperSlide
            class="testimonials__slide"
            v-for="testimonial in testimonials"
            :key="testimonial.full_name"
          >
            <HomeTestimonialsItem
              :testimonial="testimonial"
              class="testimonials__item"
            />
          </SwiperSlide>
        </Swiper>
        <div
          class="testimonials__pagination swiper-pagination swiper-pagination-line"
        ></div>
      </div>
    </div>
  </section>
</template>```

[hizbul25]

@ilgarabdullazade did you get any solution? I am having same issue.