vue-slick-carousel return error after change data

Question

Hi I have a problem with vue-slick-carouse in my Nuxt project. I have two carousel in one component:

<vue-slick-carousel
@swipe="setCarouselSwiping(true)"
@mouseup.native="setCarouselSwiping(false)"
@touchend.native="setCarouselSwiping(false)"
@afterChange="onCarouselChange"
v-bind="glassesCarouselVideo"
:asNavFor="$refs.carousel"
ref="carouselVideo"
:key="swiperKey"
>
<div
   class="slide"
   v-for="carouselProduct in productsCasted"
   :key="carouselProduct.id"
   v-if="productImage(carouselProduct)"
   ></div>
</vue-slick-carousel>
</div>


<vue-slick-carousel
@swipe="setCarouselSwiping(true)"
@mouseup.native="setCarouselSwiping(false)"
@touchend.native="setCarouselSwiping(false)"
@afterChange="onCarouselChange"
v-bind="glassesCarousel"
ref="carousel"
:asNavFor="$refs.carouselVideo"
:key="swiperKey"
>
<div
   class="glasses"
   v-for="(carouselProduct, index) in productsCasted"
   :key="carouselProduct.id"
   v-if="productImage(carouselProduct)"
   >
   <div
      @click="openProduct(carouselProduct, index)"
      class="glasses__wrapper"
      :class="{ '--active': product && carouselProduct.id == product.id }"
      >
      <div @click="refreshFittingbox()" v-if="fittingboxInitialized">
         <ImageResource :src="productImage(carouselProduct)" />
      </div>
      <NuxtLink
         :to="productRoute(product, selectedProduct)"
         target="_self"
         v-if="!isLCDDisplay && product && carouselProduct.id == product.id"
         >
         <div class="more-info">{{ _('viac o produkte') }}</div>
      </NuxtLink>
   </div>
</div>
</vue-slick-carousel>

Both slick carousel using asNavFor property. When I change data length after filter then slick carousel return error after change slide:

Uncaught TypeError: Cannot read properties of undefined (reading 'goTo')

I try after change data length add this method:

this.$nextTick(() => {
    this.swiperKey++;
});

but nothing happened. Please help me. Thanks!!