如何在使用嵌套列表时为可拖动的Vue.js拾取v模型

data() {
  return {
    nestedList: [
      {
        id: 1,
        name: 'Item 1',
        children: [
          {
            id: 2,
            name: 'Item 1.1',
            children: []
          },
          {
            id: 3,
            name: 'Item 1.2',
            children: []
          }
        ]
      },
      {
        id: 4,
        name: 'Item 2',
        children: []
      }
    ]
  };
}

<template>
  <div>
    <draggable v-model="nestedList" :options="{group: 'nested'}">
      <div v-for="item in nestedList" :key="item.id">
        <div>{{ item.name }}</div>
        <div v-if="item.children.length > 0">
          <nested-list :nestedList="item.children"></nested-list>
        </div>
      </div>
    </draggable>
  </div>
</template>

<script>
export default {
  name: 'NestedList',
  props: ['nestedList'],
  components: {
    draggable: window.vuedraggable,
    NestedList: {
      name: 'NestedList',
      props: ['nestedList'],
      template: `
        <draggable v-model="nestedList" :options="{group: 'nested'}">
          <div v-for="item in nestedList" :key="item.id">
            <div>{{ item.name }}</div>
            <div v-if="item.children.length > 0">
              <nested-list :nestedList="item.children"></nested-list>
            </div>
          </div>
        </draggable>
      `
    }
  }
};
</script>

<template>
  <div>
    <draggable v-model="nestedList" :options="{group: 'nested'}" @change="handleNestedListChange">
      <!-- ... -->
    </draggable>
  </div>
</template>

<script>
export default {
  // ...
  methods: {
    handleNestedListChange() {
      console.log(this.nestedList);
      // 在这里可以获取更新后的嵌套列表数据，进行后续处理
    }
  }
};
</script>