Vue.js 嵌套的vue可拖动元素

我尝试使用嵌套的vue可拖动元素来直观地表示歌曲结构（具有潜在的重复）

这是我作为原型提出的：

var vm=new Vue({
el:“主要”，
数据：{
“结构”：[“前奏曲”、“韵文”[“合唱”、“韵文”]，“最后合唱”]
},
});
#主{
文本对齐：居中；
宽度：300px；
背景色：#EEE；
填充：10px；
}
.元素{
文本对齐：居中；
填充：10px；
保证金：5px自动；
边界半径：10px；
颜色：#FFF；
字体系列：无衬线；
字体大小：粗体；
}
.标签{
宽度：150px；
背景色：#007BFF；
}
.组{
宽度：175px；
边框：3px实心#CED4DA；
背景色：#FFF；
}

{{tag}}
{{tag2}}
{{structure}}
您应该：

1） 将数据结构更改为递归结构：

 data: {
    "structure": [
       { name: "Prelude"}, 
       { name: "Verse"}, 
       { name: "Middle", children: [{ name: "Chorus"}, { name: "Verse"}]}, 
       { name: "Last Chorus"}
    ]
  },

2） 使用可拖动的递归组件，例如：

<template>
  <draggable class="dragArea" tag="ul" :list="data" :group="{ name: 'g1' }">
    <li v-for="el in children" :key="el.name">
      <p>{{ el.name }}</p>
      <nested-draggable v-if="el.children" :tasks="el.children" />
    </li>
  </draggable>
</template>



{{el.name}}



请参见此工作示例：

尝试最新版本并设置
dragoverbble:true