Multiple check box not working when it's value same vuejs - checkbox

Question

When I check Apple it's all check Pineapple. When I unchecked Pineapple it's also unchecked Apple.
both Tag id different. How can I check only one Apple instead of Pineapple?
var demo = new Vue({
el: '#demo',
data: {
checkedNames: []
},
computed: {
computedNames() {
let names = this.checkedNames;
return names.toString();
}
}
})
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<div id="demo">
<input type="checkbox" id="50" value="50" v-model="checkedNames">
<label for="Apple">Apple</label>
<input type="checkbox" id="51" value="51" v-model="checkedNames">
<label for="Banana">Banana</label>
<input type="checkbox" id="52" value="50" v-model="checkedNames">
<label for="Pineapple">Pineapple</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
<span>Computed names (reversed order): {{ computedNames }}</span>
</div>

Answer 1

Vue is data-driven. Since both your Apple and Pineapple checkboxes have the same value, Vue considers them to be the same.
It sounds like you want to use separate objects entirely so try this
var demo = new Vue({
el: '#demo',
data: () => ({
options: [{
id: 50,
label: "Apple",
price: 50
}, {
id: 51,
label: "Banana",
price: 51
}, {
id: 52,
label: "Pineapple",
price: 50
}],
selections: []
}),
computed: {
computedNames: ({ selections }) =>
selections.map(({ label }) => label).join(", ")
}
})
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<div id="demo">
<template v-for="fruit in options">
<input
:key="fruit.id"
type="checkbox"
:value="fruit"
v-model="selections"
:id="`fruit_${fruit.id}`"
>
<label :for="`fruit_${fruit.id}`">{{ fruit.label }}</label>
</template>
<br>
<span>Computed names: {{ computedNames }}</span>
<pre>Selections: {{ selections }}</pre>
</div>