循环 （v-for） 不适用于 keen-slider

问：

我正在使用 https://keen-slider.io，我正在尝试遍历幻灯片，每张幻灯片都有一个组件。但是，它不是显示所有幻灯片，而是只显示一张幻灯片，看起来很糟糕。<ItemCard/><ItemCard/><ItemCard/>

<template>
        <div class="keen-slider" ref="container">
            <div
                class="keen-slider__slide"
                v-for="recipe in storeRecipe.data"
                :key="recipe.id">
                <ItemCard :data="recipe" :pending="storeRecipe.pending" />
            </div>
        </div>
    </template>
    
<script setup>
import { useKeenSlider } from 'keen-slider/vue';
import { onMounted } from 'vue';
import { useStoreRecipe } from '@/store/storeRecipe';

import ItemCard from '@/component/ItemCard.vue';

const storeRecipe = useStoreRecipe();

const [container] = useKeenSlider({
    loop: true,
    spacing: 40,
    slidesPerView: 3,
});

onMounted(async () => {
    await storeRecipe.loadRecipes();
});
</script>

<style lang="scss">
@import url('keen-slider/keen-slider.css');
</style>

我还尝试添加第二个参数，然后动态添加一个类，但它也不起作用：indexv-for:class="'number-slide' + (index + 1)"

<template>
    <div class="keen-slider" ref="container">
        <div
            class="keen-slider__slide"
            :class="'number-slide' + (index + 1)"
            v-for="(recipe, index) in storeRecipe.data"
            :key="recipe.id">
            <ItemCard :data="recipe" :pending="storeRecipe.pending" />
        </div>
    </div>
</template>

有什么解决办法吗？