Checkbox 多选框 vue3

<template>
  <div class="home">
   
    <div v-for="(item, index) in arr" :key="index" style="display: flex" @click.stop="shuBut(index)">
      <a-checkbox v-model:checked="item.checked">
        {{ item.label }}
      </a-checkbox>
      <div v-for="(i, ind) in item.child" :key="ind" style="display: flex" @click.stop="BUt2(index, ind)">
        <a-checkbox v-model:checked="i.checked">
          {{ i.label }}
        </a-checkbox>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import {  ref } from 'vue';


const lis = [
  {
    checked: false,
    id: 1,
    label: '测试1',
    child: [
      {
        checked: false,
        id: 7,
        label: '孩子1',
      },
      {
        checked: false,
        id: 9,
        label: '孩子2',
      },
    ],
  },
  {
    checked: false,
    id: 2,
    label: '测试2',
    child: [
      {
        checked: false,
        id: 5,
        label: '孩子1',
      },
      {
        checked: false,
        id: 4,
        label: '孩子2',
      },
    ],
  },
];
const arr = ref([...lis]);

const shuBut = (index) => {
  console.log();
  arr.value[index].child.forEach((item) => {
    item.checked = !arr.value[index].checked;
  });
  console.log(arr.value[index].child);
};

const BUt2 = (index, ind) => {
  console.log(index, ind);
};
</script>

获取值的时候这样写
onMounted(() => {
  onlode();
});
const ist = '1,5';
const onlode = () => {
  const newARR = ist.split(',');
  newARR.map((oppo) => {
    arr.value.forEach((item, index) => {
      if (item.id == Number(oppo)) {
        item.checked = true;
        item.child.forEach((i, sum) => {
          i.checked = true;
        });
      } else {
        if (!item.checked) {
          item.checked = false;
          item.child.forEach((i, sum) => {
            if (i.id == Number(oppo)) {
              i.checked = true;
            } else {
              i.checked = false;
            }
          });
        }
      }
    });
  });
};