Component inside slide not visible until slide is in focus

[angeloatzicht]

I am working in a NuxtJS project and we are implementing GlideJS. The problem we are having now is that sometimes one of the slides only displays the HTML portion of the slide and not the component that was included. When we go forth or back until the specific slide comes into view then it will load the component succesfully. Obviously this is a flaw and we should fix it.

Does anyone have any experience with this same issue, and if so, did you manage to find a solution?

Our current code:

<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>

As you can see we use a (in this example, we tried multiple components and they all fail) component inside our slide called MoleculePicture.

It appears to show fine for all slides except for the "cloned" slides and I am unable to solve it.