title: Nested vue-draggable elements
body: <p>I am trying to have nested vue-draggable elements to visually represent a song structure (with potential repetitions).</p>
  
  <p>This is what I came up with as a prototype:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var vm = new Vue({
    el: "#main",
    data: {
      "structure": ["Prelude", "Verse", ["Chorus", "Verse"], "Last Chorus"]
    },
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"&gt;&lt;/script&gt;
  &lt;script src="//cdn.jsdelivr.net/npm/sortablejs@1.7.0/Sortable.min.js"&gt;&lt;/script&gt;
  &lt;script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.15.0/vuedraggable.min.js"&gt;&lt;/script&gt;
  
  &lt;div id="main"&gt;
    &lt;draggable v-for="tag in structure" :options="{group:'tags'}"&gt;
      &lt;div v-if="!Array.isArray(tag)" class="tag element"&gt;
        {{tag}}
      &lt;/div&gt;
      &lt;draggable v-else :options="{group:'tags'}" class="group element"&gt;
        &lt;div v-for="tag2 in tag" class="tag element"&gt;
          {{tag2}}
        &lt;/div&gt;
      &lt;/draggable&gt;
    &lt;/draggable&gt;
    {{structure}}
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Even being new to Vue.js this seems so not "the way" to go. My concrete problems with this solution are:</p>
  
  <ul>
  <li>When the grouping element is at the top, I can't drag anything else above it (same applies to the very bottom)</li>
  <li>The dragged structure does not get represented in the data.structure property</li>
  <li>How would I go about nesting even more? Group in group in group...</li>
  </ul>