[Vuejs]-V-for checkbox value in child component as prop (array of objects)

From MDN: Checkbox: Additional attributes,

Attribute        Description
checked          Boolean; if present, the checkbox is toggled on by default
indeterminate    A Boolean which, if present, indicates that the value of the checkbox is indeterminate rather than true or false
value            The string to use as the value of the checkbox when submitting the form, if the checkbox is currently toggled on

So in your codes, v-bind:value for <input type="checkbox"> inside child.vue will not toggle the checkbox, it only changes the value of checkbox when submitting the form.

From Vue Guide:: it states below:

v-model internally uses different properties and emits different
events for different input elements:

text and textarea elements use value property and input event;

checkboxes and radiobuttons use checked property and change event;

select fields use value as a prop and change as an event.

That is the way how v-model works.

So in child.vue, uses:

<input type="checkbox" :checked="checked" @click="$emit('checked', id)">

Updated Code SandBox