# Vue3 TS Component/Checkbox
父層

<BasicCheckboxGroup v-model="selected" 
:options="options" />

子層

<template>
 <div v-for="(option, key) in options" :key="key" class="flex">
 <input
 v-model="selected"
 type="checkbox"
 :option="option"
 :value="option.id"
 @checked="$emit('update:modelValue', selected)"
 />
 <label>{{ option.name }}</label>
 <div>---{{ selected }}---</div>
 </div>
</template>

子層接值

interface Props {
    selected: string[]
} 
const props = withDefaults(defineProps<Props>(), {
    selected: () => [],
}) 

傳值結果 Ｘ
------
const selected = ref<string[]>([])  

傳值結果 Ｏ

props 只能 readonly，不能 mutate，目的只是給 props 預設值沒有衝突，建議不要用來存 props 的變數名稱
不要跟 props 的變數一樣