如何在Vuejs中创建带有可拖动项的嵌套列表？

npm install vuedraggable

<template>
  <div>
    <draggable v-model="list" :options="dragOptions">
      <div v-for="(item, index) in list" :key="item.id">
        <div>{{ item.name }}</div>
        <draggable v-model="item.children" :options="dragOptions">
          <div v-for="(child, childIndex) in item.children" :key="child.id">
            <div>{{ child.name }}</div>
          </div>
        </draggable>
      </div>
    </draggable>
  </div>
</template>

<script>
import draggable from 'vuedraggable';

export default {
  components: {
    draggable,
  },
  data() {
    return {
      list: [
        {
          id: 1,
          name: 'Item 1',
          children: [
            {
              id: 11,
              name: 'Child 1',
            },
            {
              id: 12,
              name: 'Child 2',
            },
          ],
        },
        {
          id: 2,
          name: 'Item 2',
          children: [
            {
              id: 21,
              name: 'Child 3',
            },
            {
              id: 22,
              name: 'Child 4',
            },
          ],
        },
      ],
      dragOptions: {
        group: 'nested',
        animation: 150,
        fallbackOnBody: true,
      },
    };
  },
};
</script>