Why swipe not working properly with nuxt3 i18n?

In my multilingual site i'm using swipe for carousal. It's working fine, but getting error during switch language. I am using i18n for translation. I am getting following error:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'removeEventListener')

Here is my code:

<Swiper
  :modules="[SwiperAutoplay, SwiperGrid]"
  :slides-per-view="1"
  :space-between="30"
  :loop=true
  :effect="'slide'"
  :breakpoints="{
    1200: { slidesPerView: 3 }, 
    768: { slidesPerView: 2 },
    320: { slidesPerView: 1 } 
  }"
  :autoplay="{
    delay: 4000,
    disableOnInteraction: false,
  }"
>
  <SwiperSlide v-for="(slide, index) in carousalData.carousel_items" :key="index">
    <HomeCarouselCard :slide="slide"/>
  </SwiperSlide>
</Swiper>

Please help me.

Try to wrap the component inside of a client-only so that it is only run on the client-side.