Vue super simple tree checkbox component

I want to create a very basic tree checkbox component. All available npm components are to advanced offering functionality that I don't need (like dragging, selection without checkboxes and so on). With my basic understanding of Vue, I think that this shouldn't be hard. Basically using One-Way Data Flow, by checking parent checkbox all child checkboxes should also check themselves automagically. But that's not the case for me.

This is my setup. I have two components that call one another. One is for forming a group and another is for actually displaying the checkboxes.

Inside the main view I call the group element and passing the data and default checkbox state:

<template>
<TreeSelectGroup :items="items" :state="false"/>
</template>

Grouping element for looping through items and calling the Single element.

<template>
  <ul>
    <li v-for="(item, index) in items" :key="index">
      <TreeSelectSingle v-if="item" :item="item" :state="state"/>
    </li>
  </ul>
</template>

<script setup lang="ts">
import TreeSelectSingle from "@/components/TreeSelect/TreeSelectSingle.vue";

defineProps<{
  items: object;
  state: boolean;
}>();
</script>

Single element for actually displaying the <input/> and checking if item has children , then calling back the Group element for repeating the process.

<template>
  <div>
    <input :checked="checkboxState" @change="checkboxState = !checkboxState" type="checkbox"/> {{ item.label }}
    <TreeSelectGroup v-if="item.children" :items="item.children" :state="checkboxState"/>
  </div>
</template>

<script setup lang="ts">
import {ref} from "vue";
import TreeSelectGroup from "@/components/TreeSelect/TreeSelectGroup.vue";

const props = defineProps<{
  item: object;
  state: boolean;
}>();

let checkboxState = ref(props.state);
</script>

So I think the whole problem has to be with the let checkboxState = ref(props.state); . Some how the newly updated value doesn't update in the child elements.

Note

Using Vue Dev tools I can see, that actually the updated values do get updated in the child component as props, but then fail to be updated as Ref

So my question is: is this even a valid approach and can this be done? And more importantly why this doesn't work?