Struggling with incorporating checkboxes into a separate component. I have a child component with a basic card template and checkbox - essentially, a product list where each card should have a checkbox for deletion. Currently, as I loop through an array to display the cards, checking one checkbox automatically checks another, despite assigning unique IDs during rendering. I've searched for solutions without success, so any assistance would be greatly appreciated! The child component in question is ProductCard.vue
<template>
<div>
<input :id="id" type="checkbox" :checked="modelValue"
@change="$emit('update:modelValue',$event.target.checked)">
</div>
</template>
<script setup>
defineProps(['id','modelValue'])
</script>
And here is the parent component :
<template>
<ProductCard v-for="item in array" :key="item.id" v-model="newsletter"/>
</template>
<script setup>
import ProductCard from '@/components/ProductCard.vue'
const array = [{},{}];
</script>
Appreciate your help!