Partial elements loading on vue3 Carousel

I’m having issues on trying to figure out how to do the following with plugin vue3-carousel. First of all I have my component at parent:

<AddonsCarousel
              :addons="addons"
              :loading="isLoading"
              :offer-name="offerName"
              :offer-identifier="offerIdentifier"
            />

But addons is at same time splitted between different types of addons like ms365addons and inProductHouseAddons which are loaded from a computed property which, at same time, calls an API.

I wonder how can I make vue3-carousel load the first addons that will arrive (ms365addons) and put an skeleton as loading card for the other addons that are still up to be loaded (inProductHouseAddons).

I tried this at AddonsCarousel.vue but not working as expected:

<Slide v-if="loading">
      <div
        v-for="index in 4"
        :key="index"
        class="carousel__item pl-1 pr-1"
      >
        <AddonCardSkeleton />
      </div>
    </Slide>
    <Slide v-else>
      <div
        v-for="addon in addons"
        :key="`addon-${addon.token}`"
        class="carousel__item pl-1 pr-1"
      >
        <AddonCardV2
          :addon="addon"
          :readonly="isReadonly"
          :offer-identifier="offerIdentifier"
          :offer-name="offerName"
        />
      </div>
    </Slide>

Someone can give me a hint on how to handle it? Should I split addons prop?