sample of two-way binding using v-model on multiple checkbox component (for Vue 3.x)

App.vue

<script>
  import MultiCheckbox from "./MultiCheckbox.vue"
  import MultiCheckboxProp from "./MultiCheckboxProp.vue"
  export default {
    components: { MultiCheckbox, MultiCheckboxProp },
    data(){
      return{
      	checkList: [],
        checkListProp: []
    	}
    },
  }
    
</script>

<template>
  <ul>
    <li><multi-checkbox v-model="checkList" :id="0" :thisValue="0">hoge</multi-checkbox></li>
    <li><multi-checkbox v-model="checkList" :id="1" :thisValue="1">fuga</multi-checkbox></li>
    <li><multi-checkbox v-model="checkList" :id="2" :thisValue="2">piyo</multi-checkbox></li>
  </ul>
  <div>
    checked entries: {{ checkList }}
  </div>

  <ul>
    <li><multi-checkbox-prop v-model="checkListProp" :id="10" :thisValue="10">foo</multi-checkbox-prop></li>
    <li><multi-checkbox-prop v-model="checkListProp" :id="11" :thisValue="11">bar</multi-checkbox-prop></li>
    <li><multi-checkbox-prop v-model="checkListProp" :id="12" :thisValue="12">baz</multi-checkbox-prop></li>
  </ul>
  
  <div>
    checked entries: {{ checkListProp }}
  </div>
</template>

MultiCheckbox.vue

<template>
	<div class="multi-checkbox">
    <input 
      type="checkbox"
      :checked="modelValue.includes(thisValue)"
      @input="(event) =>{
        $emit('update:modelValue', modelValue.includes(event.target.value) ?
                         modelValue.filter(v => v !== event.target.value) : 
                         modelValue.concat(event.target.value)
        )
      }"
      :id="id"
      :value="thisValue"
    >
    <slot />
  </div>
</template>

<script>
	export default {
    props: ['modelValue', 'id', 'thisValue'],
    emits: ['update:modelValue']
  }
</script>

multiCheckboxProp.vue

<template>
	<div class="multi-checkbox-prop">
    <input 
      type="checkbox"
      v-model="bindProp"
      :id="id"
      :value="thisValue"
    >
    <slot />
  </div>
</template>

<script>
	export default {
    props: ['modelValue', 'id', 'thisValue'],
    emits: ['update:modelValue'],
    computed:{
      bindProp:{
        get(){ return this.modelValue },
        set(newValue){ this.$emit('update:modelValue', newValue) }
      }
    }
  }
</script>