Vue 3 make same multiple cards with different contents - css

Question

I got this result: Content got double but, not cloning as a card element
here's the code
<script setup>
import { ref } from 'vue';
defineProps({
project: String,
});
const projectList = ref([
{
img: './src/assets/img/Pp.png',
tag: 'React JS',
name: 'Destination List App',
desc: 'Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas..',
},
{
img: './src/assets/img/PP2.png',
tag: 'HTML CSS JS',
name: 'City Specialties App',
desc: 'Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas..',
},
]);
</script>
and here is the template tag
<div>
<!-- I want this whole element below to be multiplied -->
<div class="col-md-4">
<div class="card card--project">
<img class="card__img" v-for="project in projectList" v-bind:key="project.img" :src="project.img" alt="" />
<div class="card__text">
<p class="project-label text-md text-md--md" v-for="project in projectList" v-bind:key="project.tag">{{ project.tag }}</p>
<h4 class="text-gradient-primary" v-for="project in projectList" v-bind:key="project.name">{{ project.name }}</h4>
<p class="project-desc text-md" v-for="project in projectList" v-bind:key="project.desc">{{ project.desc }}</p>
Read More
</div>
</div>
</div>
</div>
I want to make a card section that look like this

Answer 1

That's because you are looping all the images, tags, etc individually. As you said you want the whole element to be multiplied in your comments, that's what you need to do, loop the whole card.
<div>
<!-- I want this whole element below to be multiplied -->
<div class="col-md-4" v-for="(project,id) in projectList" v-
bind:key="project.id" >
<div class="card card--project">
<img class="card__img" " :src="project.img" alt="" />
<div class="card__text">
<p class="project-label text-md text-md--md" >{{ project.tag }}</p>
<h4 class="text-gradient-primary">{{ project.name }}</h4>
<p class="project-desc text-md" >{{ project.desc }}</p>
Read More
</div>
</div>
</div>
</div>