vue-owl-carousel not working with dynamic data

Question

I tried this code with manual data and it worked perfectly, now I'm pulling data from the database to the carousel but it just loads all the images unto the page without sliding through them. this is my code

<carousel :margin="20"
              :autoplay="true"
              :items="3"
              :loop="true"
              :nav="true"
              :navText="[`<span class='fas fa-angle-left text-bold h3'></span>`,`<span class='fas fa- 
               angle-right text-bold h3'></span>`]"
              :dots="false"
    >
        <div v-for="(project, index) in projects" :key="index" :class="index === 0 ? 'active': ''">
            <img :src="project.cover_image" alt="image" >
        </div>


    </carousel>

Answer 1

You just need to add v-if="projects.length > 0" in your carousel

<carousel v-if="projects.length > 0">
    <div v-for="(project, index) in projects" :key="index">
        <img :src="project.cover_image" alt="image" >
    </div>
</carousel>