title: How can I work around the limitation of multiple root elements in Vue.js?
body: <p>hopefully someone here will be able to help me with this problem.</p>
  
  <p>I have the following data:</p>
  
  <pre class="lang-js prettyprint-override"><code>[
    {
      title: 'Header',
      children: [
        {
          title: 'Paragraph',
          children: [],
        },
      ],
    },
    {
      title: 'Container',
      children: [
        {
          title: 'Paragraph',
          children: [],
        },
      ],
    },
  ]
  </code></pre>
  
  <p>I want to render this in a list of <code>&lt;div&gt;</code> like this:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="sortable-item" data-depth="1" data-index="0"&gt;Header&lt;/div&gt; &lt;!-- Parent --&gt;
  &lt;div class="sortable-item" data-depth="2" data-index="0"&gt;Paragraph&lt;/div&gt; &lt;!-- Child--&gt;
  &lt;div class="sortable-item" data-depth="1" data-index="1"&gt;Container&lt;/div&gt; &lt;!-- Parent --&gt;
  &lt;div class="sortable-item" data-depth="2" data-index="0"&gt;Paragraph&lt;/div&gt; &lt;!-- Child--&gt;
  </code></pre>
  
  <p>I have built a component that would be recursive, this is what I have so far:</p>
  
  <pre><code>&lt;template&gt;
    &lt;template v-for="(item, index) in tree"&gt;
      &lt;div
        class="sortable-item"
        :data-depth="getDepth()"
        :data-index="index"
        :key="getKey(index)"
      &gt;
        {{ item.title }}
      &lt;/div&gt;
      &lt;Multi-Level-Sortable
        :tree="item.children"
        :parent-depth="getDepth()"
        :parent-index="index"
        :key="getKey(index + 0.5)"
      &gt;&lt;/Multi-Level-Sortable&gt;
    &lt;/template&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    name: 'MultiLevelSortable',
    props: {
      tree: {
        type: Array,
        default() {
          return [];
        },
      },
      parentDepth: {
        type: Number,
      },
      parentIndex: {
        type: Number,
      },
    },
    methods: {
      getDepth() {
        return typeof this.parentDepth !== 'undefined' ? this.parentDepth + 1 : 1;
      },
      getKey(index) {
        return typeof this.parentIndex !== 'undefined' ? `${this.parentIndex}.${index}` : `${index}`;
      },
    },
  };
  &lt;/script&gt;
  </code></pre>
  
  <p>As you can see not only I have a <code>&lt;template&gt;</code> as the root element I also have a <code>v-for</code>, two "no no" for Vue.js. How can I solve this to render the list of elements like I pointed out above?</p>
  
  <p><strong>Note:</strong> I have tried <a href="https://github.com/y-nk/vue-fragment" rel="nofollow noreferrer">vue-fragment</a> and I was able to achieve the structure I wanted, but then when I tried using <a href="https://github.com/SortableJS/Sortable" rel="nofollow noreferrer">Sortable.js</a> it didn't work, as if it wouldn't recognise any of the <code>.sortable-item</code> elements.</p>
  
  <p>Any help will be greatly appreciated! Thank you!</p>