How to use Suspense in Nuxtjs Properly

I want to use skelton while data being fetched or loaded from API in place of carousel's data and for that i am trying to use suspense in my Nuxtjs3 page.

but i am unable to make it work.

in below setup, i get nothing being loaded in place of carousel. its blank even after promise gets resolved, if i remove suspense then it works fine.

here what i did so far.

    <template>
        <div class="ttc-py-1 sm:ttc-py-5">
          <div class="ttc-container ttc-mx-auto">
            <SectionHeader :heading="`Activities near you`" />
            <client-only>
              <Carousel
                :items-to-show="3.5"
                :wrap-around="true"
                :breakpoints="breakpoints"
              >

                <Suspense>

                  <Slide
                    v-for="(item, index) in preferredTours"
                    :key="index"
                  >
                    <CardsActivityCard
                      :city="item.city"
                      :country="item.country"
                      :image="`${item.image}`"
                      :packagename="item.package_name"
                      :price="item.price"
                      :uniqueid="item.uniqueId"
                      :slug="item.slug"
                    />
                  </Slide>

                  <template #fallback>
                    <Slide v-for="i in 5" :key="i">
                      <div>loading ...... or Skeltons</div>
                    </Slide>
                  </template>

                </Suspense>

              </Carousel>
            </client-only>
          </div>
        </div>
    </template>
    
    
    <script setup>

    import { ref } from "vue";
    const { apiUrl } = useRuntimeConfig();
    import { Carousel, Slide, Pagination, Navigation } from "vue3-carousel";
    import "vue3-carousel/dist/carousel.css";
    
    const [{ data: FavDests }, { data: preferredTours }] = await Promise.all([
      useFetch(`${apiUrl}/dests/getpopulardests?country=${userCountry}`, 
       { key: "cQsyfYspDP2zM1xMe0YY9Gfv4CgQByAd" }
      ),
      useFetch(
        `${apiUrl}/tours/getpopulartours?country=${userCountry}&usercurrency=${userCurrency}`,
        { key: "Z1rvmHPxAOLvt68WZZq2BUNsHQ8I213Y" }
      ),
    ]);

   </script>