vue.js - クローン内の GlideJS 読み込みコンポーネントを使用した NuxtJS がコンポーネントを失う

Question

私は NuxtJS プロジェクトで作業しており、 GlideJS を実装しています。私たちが現在抱えている問題は、スライドの 1 つに含まれているコンポーネントではなく、スライドの HTML 部分のみが表示される場合があることです。特定のスライドが表示されるまで前後に移動すると、コンポーネントが正常に読み込まれます。これは明らかに欠陥であり、修正する必要があります。

誰かがこの同じ問題を経験したことがありますか? もしそうなら、解決策を見つけることができましたか?

現在のコード:

<template>
  <div>
    <vue-glide
      v-if="entries.length > 0"
      ref="slider"
      type="carousel"
      class="max-w-full mb-6 md:mb-12"
      :per-view="perView"
      :breakpoints="breakpoints"
    >
      <vue-glide-slide v-for="(entry, index) in entries" :key="index">
        <div class="rounded-xl bg-app-green-200 overflow-hidden">
          <MoleculePicture image="entry.images">

          <div class="border-b-2 border-app-yellow block"></div>
          <div class="py-5 px-6">
            Some HTML here (working fine)
          </div>
        </div>
      </vue-glide-slide>
      <template v-if="entries" slot="control">
        <div class="float-left cursor-pointer border-box w-2/5 mt-4" data-glide-dir="<">
          <AtomIconArrowLeft class="w-4 float-left md:float-right" />
        </div>
        <div class="inline-block text-center border-box w-1/5 mt-4 font-bold">{{ currentSlide + 1 }}/{{ entries.length }}</div>
        <div class="float-right cursor-pointer border-box w-2/5 mt-4" data-glide-dir=">">
          <AtomIconArrowRight class="w-4 float-right md:float-left" />
        </div>
      </template>
    </vue-glide>
  </div>
</template>

ご覧のとおり、スライド内でMoleculePictureというコンポーネントを使用しています (この例では、複数のコンポーネントを試しましたが、すべて失敗しました) 。

「複製された」スライドを除くすべてのスライドで問題がないように見えますが、解決できません。