Examples with multiple checkbox in VueJS

App.vue

<template>
  <Checkbox v-for="person in people" :id="person.id" :label="person.name" :data="person" v-model="selectedPeople" />

  <pre>{{ selectedPeople }}</pre>
</template>

<script setup>
  import { ref } from 'vue'
  import Checkbox from './Checkbox.vue'

	const people = ref([
  	{ id: 1, name: 'John Doe' },
    { id: 2, name: 'Jane Doe' },
    { id: 3, name: 'Alex Doe' },
  ])
  const selectedPeople = ref([])
</script>

Checkbox.vue

<template>
  <input :id="$attrs.id" type="checkbox" :value="data" v-model="model">
  <label :for="$attrs.id">{{ label }}</label><br>
</template>

<script setup>
  import { computed, defineExpose, ref } from 'vue'
  const props = defineProps({
    data: {
      type: Object,
      default: () => ({})
    },
    modelValue: Array,
    label: String
  })
  const emit = defineEmits(['update:modelValue'])
  const model = computed({
    get: () => props.modelValue,
    set: items => emit('update:modelValue', items)
  })
</script>

Example.vue

<template>
  <div>
    <input id="all" type="checkbox" @click="checkAll()" v-model="isCheckAll">
    <label for="all">Select All</label>
  </div><br>

  <div v-for="person in people" :key="person.id">
    <input :id="person.id" type="checkbox" :value="person" v-model="selectedPeople" @change="allSelected()">
  	<label :for="person.id">{{ person.name }}</label>
  </div><br>

  <pre>{{ selectedPeople }}</pre>
</template>

<script setup>
  import { ref } from 'vue'

	const people = ref([
  	{ id: 1, name: 'John Doe' },
    { id: 2, name: 'Jane Doe' },
    { id: 3, name: 'Alex Doe' },
  ])
  const selectedPeople = ref([])
  const isCheckAll = ref(false)
  
  const checkAll = (value) => {
	  !isChecked.value
	    ? selectedPeople.value = people
	    : selectedPeople.value = []
	}
  
  const allSelected = () => isChecked.value = selectedPeople.value.length === people.length
</script>