Vue嵌套的draggable / sortable.js

Question

我有以下代码示例（他正在工作）

var nested = {
  template: '#template',
  name: 'nested-draggable',
  props: ['tasks']
};

var app = new Vue({
  el: "#app",
  components: {
        "nested-draggable" : nested
  },
  data: {
  "tasks": [
    {
      "name": "task 1",
       "tasks": [
         {
           "name": "task 1 - sub task 1",
           "tasks": []
         }
       ]
    },
    {
      "name": "task 2",
      "tasks": [
         {
           "name": "task 2 - sub task 1",
           "tasks": []
         }
       ]
    },
    {
      "name": "task 3 - no children for now, but might have in the future",
			"tasks": [
       ]
    }
  ]
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.9.0/Sortable.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/15.0.0/vuedraggable.min.js"></script>
<script type="text/x-template" id="template">
   <draggable :element="'ul'" :list="tasks" class="dragArea" :options="{group:{ name:'g1'}}" > 
			<li v-for="el in tasks" :key="el.name">
         <p>{{el.name}}</p>
         <nested-draggable :tasks="el.tasks"></nested-draggable>
			  </li>
	</draggable>
</script>



<div id="app">
  <nested-draggable :tasks="tasks"/>
</div>

有这样的代码部分：

<script type="text/x-template" id="template">
....
</script>

var nested = {
  template: '#template',
  name: 'nested-draggable',
  props: ['tasks']
};

var嵌套的模板引用脚本ID。 如何将其嵌入到典型的.vue组件中？

我认为在.vue组件中设置标签的ID是错误的，但我不知道如何正确执行...