Vue.draggable: почему нельзя перетащить вложенный элемент в другой элемент?

Question

Я хочу реализовать список, который можно переупорядочить перетаскиванием. Элемент в списке будет иметь несколько подпунктов, которые также можно переупорядочить путем перетаскивания.

Подпункты не могут стать предметом, и предмет не может быть подпунктом.

Вот код:

var vm = new Vue({
  el: "#main",
  data: {
    list: [
       {
         name: "item1",
         sons: ["sub_item1", "sub_item4"]
       },
       {
         name: "item2",
         sons: ["sub_item2"]
       },
       {
         name: "item3",
         sons: ["sub_item3"]
       },
    ]
  },
});

#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;
}

.primary {
  margin-top: 20px
}

.sub {
  width: 100px;
}
/* .sub {
  margin-right: 50px;
} */

<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-model="list" group="group1">
  <div v-for="e in list">
   <div class="tag element primary">
      {{e.name}}
    </div>
    <draggable v-model="e.sons" group="group2">
    <div v-for="son in e.sons" class="tag element sub">
          {{son}}
    </div>
    </draggable>
  </div>
  </draggable>
  {{list}}
</div>

Запустив мой код, вы обнаружите, что он может:

1. изменить порядок элементов путем перетаскивания.
2. переупорядочить подпункт перетаскиванием, которое принадлежит элементу. Например, вы можете изменить порядок sub_item1 а также sub_item4 перетаскивая

Но это не может тянуть sub_item2 к подпункту item1, Другими словами, я просто хочу свою модель list вот так при помощи перетаскивания:

list: [
   {
     name: "item1",
     sons: ["sub_item1", "sub_item4", "sub_item2"]
   },
   {
     name: "item2",
     sons: []
   },
   {
     name: "item3",
     sons: ["sub_item3"]
   },
]