get selected checkbox from child component - vue.js

Question

i'm showing up all category and subcategory with recursive component. i want to get all selected categor's id in parent component.
in my code when i select sub cat it does not return anything how can i fix this?
you can see live example here
https://codesandbox.io/s/eloquent-waterfall-3cpfe?file=/src/App.vue
parent component.
<template>
<div id="app">
<Child :cats.sync="selectedCategories" :categories="categories"/>
</div>
</template>
<script>
export default {
data: function() {
return {
categories: [
{ id: 1, name: "Category 1", children: [
{id: 11, name:"sub1", children: [
{id: 111, name: "sub 2", children: []}
]}
] },
{ id: 2, name: "Category 2", children: [] },
{ id: 3, name: "Category 3", children: [] }
],
selectedCategories: []
};
},
};
</script>
child component:
<template>
<div class="hello">
<label v-for="c in categories" :key="c.id">
<input v-model="temp" type="checkbox" :value="c">
{{ c.name }}
<template v-if="c.children.length > 0">
<Child :categories="c.children" />
</template>
</label>
</div>
</template>
<script>
export default {
name: "Child",
props: {
categories: Array,
cats: Array
},
computed: {
temp: {
get: function() {
return this.cats;
},
set: function(newValue) {
this.$emit("update:cats", newValue);
}
}
}
};
</script>

Answer 1

It does not work because you are binding subcategories with <HelloWorld v-model="temp" :categories="c.children" /> instead of <HelloWorld :cats.sync="temp" :categories="c.children" />