将Vue.Draggable设置子组件项作为其可拖动项

Question

Vue.Draggable模块在将类设置为其引用时将元素转换为可拖动元素。

问题：我试图使子组件项目成为可拖动对象（例如：酒树，蚂蚁设计树组件），但是由于Vue.Dragable使拖动功能不起作用，因此仅使第一个子元素成为可拖动对象。

不好。：我尝试使用handle指令而不是可拖动类，但是这并不能带来很好的体验。

这是一个例子，其中有一个盒子可以工作，而另一个（酒树）却不能。

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>