Сделать Vue.Draggable установить дочерний элемент компонента как его перетаскиваемый элемент

Question

Модуль Vue.Draggable преобразует элемент в перетаскиваемый, когда мы устанавливаем класс в качестве его ссылки.

Проблема: я пытался сделать перетаскиваемые элементы дочерних компонентов (например, ликворное дерево, компонент дерева разработки муравьев), но функция перетаскивания не работает, поскольку Vue.Dragable делает перетаскиваемым только первый дочерний элемент.

Обс.: Я пытался использовать директиву handle вместо класса dragable, но это не дает хорошего опыта.

Вот пример того, что с коробкой, которая работает, а с другой (спиртное дерево) - нет.

new Vue({
  el: '#main',
  data() {
    return {
      items: [{
          text: 'Item 1'
        },
        {
          text: 'Item 2'
        },
        {
          text: 'Item 3'
        }
      ],
      list: [{
        text: 'Item 1'
      }]
    }
  }
})

.dragArea {

  width: 100%;
  float:left;

}

.drop-house {
  width: 32%;
  height: 200px;
  float: left;
  border: 1px solid blue;
}
.second-drop-house {
  width: 32%;
    height: 200px;
  float: left;
  border: 1px solid blue;
}
.drag-base {
  background: #ddd;
}
.drag-house {
  width: 32%;
    height: 200px;
  float: left;
  border: 1px solid blue;
}
.sortable-list {
  background-color:$border-color;
  padding:.1px 0;
  display:block;
}

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<script src="https://cdn.jsdelivr.net/npm/liquor-tree"></script>
<script src="//cdn.jsdelivr.net/npm/sortablejs@1.8.4/Sortable.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.20.0/vuedraggable.umd.min.js"></script>


<div id="main">
<div class="dragArea">
  <div class="drag-house">
    <strong>liquor-tree (drag dont works)</strong>
    <draggable group="base" :list="items" draggable=".tree-node">
      <tree :data="items" ref="tree" />
    </draggable>
  </div>

  <div class="second-drop-house">
    <strong>simple html child (drag works)</strong>
   
      <ul>
       <draggable group="base" draggable=".tree-node" :list="items">
        <li class="tree-node" v-for="(item, index) in items" :key="index">{{item.text}}</li>
   </draggable>
      </ul>
 

  </div>
  <div class="drop-house">
    <strong>DROP ITEMS HERE</strong>
    <ul>
    <draggable group="base" :list="list" draggable=".tree-node" class="drag-base">
      
        <li v-for="(item, index) in list" class="tree-node" :key="index">{{item.text}}</li>
     
    </draggable>
     </ul>
  </div>
  </div>
  
  <br />
  
  <hr />
  

  <p>1. draggable class = tree-node</p>
  <p>2. draggable group = base</p>
</div>