Nested vue-draggable elements - vue.js

Question

I am trying to have nested vue-draggable elements to visually represent a song structure (with potential repetitions).
This is what I came up with as a prototype:
var vm = new Vue({
el: "#main",
data: {
"structure": ["Prelude", "Verse", ["Chorus", "Verse"], "Last Chorus"]
},
});
#main {
text-align: center;
width: 300px;
background-color: #EEE;
padding:10px;
}
.element {
text-align: center;
padding: 10px;
margin: 5px auto;
border-radius: 10px;
color: #FFF;
font-family: sans-serif;
font-weight: bold;
}
.tag {
width: 150px;
background-color: #007BFF;
}
.group {
width: 175px;
border: 3px solid #CED4DA;
background-color: #FFF;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/sortablejs#1.7.0/Sortable.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.15.0/vuedraggable.min.js"></script>
<div id="main">
<draggable v-for="tag in structure" :options="{group:'tags'}">
<div v-if="!Array.isArray(tag)" class="tag element">
{{tag}}
</div>
<draggable v-else :options="{group:'tags'}" class="group element">
<div v-for="tag2 in tag" class="tag element">
{{tag2}}
</div>
</draggable>
</draggable>
{{structure}}
</div>
Even being new to Vue.js this seems so not "the way" to go. My concrete problems with this solution are:
When the grouping element is at the top, I can't drag anything else above it (same applies to the very bottom)
The dragged structure does not get represented in the data.structure property
How would I go about nesting even more? Group in group in group...

Answer 1

You should:
Change the data structure into a recursive one:
data: {
"structure": [
{ name: "Prelude"},
{ name: "Verse"},
{ name: "Middle", children: [{ name: "Chorus"}, { name: "Verse"}]},
{ name: "Last Chorus"}
]
},
Use recursive components using draggable, something like:
<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>
See this working example:
https://sortablejs.github.io/Vue.Draggable/#/nested-example