如何将vuedraggable用于处理Vuex中嵌套数据数组的嵌套组件？

<template>
  <vuedraggable v-model="nestedArray">
    <div v-for="(item, index) in nestedArray" :key="index">
      <!-- 嵌套组件的内容 -->
    </div>
  </vuedraggable>
</template>

<script>
import draggable from 'vuedraggable';

export default {
  components: {
    vuedraggable: draggable,
  },
  data() {
    return {
      nestedArray: [], // 嵌套数据数组
    };
  },
};
</script>

<template>
  <vuedraggable v-model="nestedArray">
    <div v-for="(item, index) in nestedArray" :key="index">
      <!-- 嵌套组件的内容 -->
    </div>
  </vuedraggable>
</template>

<script>
import draggable from 'vuedraggable';
import { mapState } from 'vuex';

export default {
  components: {
    vuedraggable: draggable,
  },
  computed: {
    ...mapState(['nestedArray']), // 将Vuex中的nestedArray映射到组件的data中
  },
};
</script>

<template>
  <vuedraggable v-model="nestedArray" @end="onDragEnd">
    <div v-for="(item, index) in nestedArray" :key="index">
      <!-- 嵌套组件的内容 -->
    </div>
  </vuedraggable>
</template>

<script>
import draggable from 'vuedraggable';
import { mapState, mapMutations } from 'vuex';

export default {
  components: {
    vuedraggable: draggable,
  },
  computed: {
    ...mapState(['nestedArray']), // 将Vuex中的nestedArray映射到组件的data中
  },
  methods: {
    ...mapMutations(['updateNestedArray']), // 映射mutation方法
    onDragEnd() {
      this.updateNestedArray(this.nestedArray); // 触发mutation来更新Vuex中的数据
    },
  },
};
</script>