Vue3实现列表的拖拽切换

<template>
    <div class="row">
        <div class="col" v-for="(item,index) in list1.list">
            <h3>{{ item.name }}{{item.nlist.filter(itm=>itm.checked).length}} / {{ item.nlist.length }}</h3>
            <draggable class="list-group" :list="item.nlist" group="people" @change="log">
                <template #item="{ element, index }">
                    <div class="list-group-item" :key="element.name">
                       <input type="checkbox" :checked="element.checked" @change="chanclick(item.id,index)"> {{ element.name }}
                    </div>
                </template>
            </draggable>
        </div>
        <rawDisplayer class="col-3" :value="list1" title="List 1" />
        <rawDisplayer class="col-3" :value="list2" title="List 2" />
    </div>
</template>

<script setup>
import { ref } from "vue";
import Draggable from "vuedraggable";
const list1 = ref(
    {
        name: '项目一',
        list: [
            {
                name: '要做',
                id:123,
                nlist: [
                    { name: "John", id: 1,checked:false },
                    { name: "gro", id: 2,checked:true },
                    { name: "frfr", id: 3,checked:false },
                ]
            },
            {
                name: '正在做',
                id:456,
                nlist: [
                    { name: "法人股hn", id: 11,checked:false },
                    { name: "得分o", id: 22,checked:false },
                    { name: "共和国让他r", id: 33 ,checked:true},
                ]
            },
            {
                name: '代办',
                id:789,
                nlist: [
                    { name: "v人格人格", id: 111 ,checked:true},
                    { name: "个人购房", id: 222 ,checked:false},
                    { name: "帮帮发", id: 333 ,checked:true},
                ]
            },
        ]
    }
);
const list2 = ref([
    { name: "Juan", id: 5 },
    { name: "Edgard", id: 6 },
    { name: "Johnson", id: 7 },
]);
const log = (evt) => {
    console.log('wwwwwwwwwwwww', evt.added.element.name);
};
//状态的改变
const chanclick=(id,ind)=>{
    console.log('checked',id,ind);
}
</script>