vue-draggable嵌套拖动

从 https://www.jianshu.com/p/edc1024aa4f0 这里找到代码，基本可以使用，但是 子列表拖拽的时候，视图是变了，但是子列表值没有变化，这里稍作改变，代码如下，直接复制就可以

<template>
  <draggable class="wrapper" :list="list" @update="datadragEnd">
    <transition-group>
      <div v-for="(item, index) in list" :key="index" class="item">
        <draggable
          class="wrapper"
          :list="item"
          @update="datadragEndSub(index, $event)"
        >
          <transition-group>
            <p v-for="(item2, index2) in item" :key="index2">{{ item2 }}</p>
          </transition-group>
        </draggable>
      </div>
    </transition-group>
  </draggable>
</template>

<script>
import draggable from "vuedraggable";

export default {
  name: "HelloWorld",
  components: { draggable },
  data() {
    return {
      list: [
        [1, 2, 3, 4],
        [7, 8, 5, 6],
        [9, 10, 5, 6],
        [11, 12, 3, 5],
        [13, 14, 4, 6],
        [15, 16, 3, 6],
      ],
    };
  },
  methods: {
    datadragEnd(evt) {
      console.log(this.list);
    },
    datadragEndSub(index, evt) {
      console.log(this.list);
    },
  },
};
</script>
<style scoped lang="less">
.wrapper {
  display: flex;
  justify-content: center;
  width: 100%;

  .item {
    margin: 20px;
    width: 300px;
    background-color: #42b983;
    color: #ffffff;
    p {
      margin: 5px;
      padding: 10px;
      height: 20px;
      background: lightcoral;
    }
  }
}
</style>