vue vuedraggable两个不同模块之间拖拽

Question

<draggable
  group='task'
  v-model='items'
  @add='addCollection'
  animation="1000">
    <transition-group tag="div" class="container">
      <div class="item" 
          :class="'item' + item.id"
          v-for="item in items" :key="item.id"
          draggable="true"
          animation="1000">
         <div id="charts-demo" v-if="item.id === 1" class='item-echarts'></div>
         <div id="charts-demo2" v-if="item.id === 2" class='item-echarts'></div>
         <div id="charts-demo3" v-if="item.id === 3" class='item-echarts'></div>
       </div>
    </transition-group>
</draggable>

<draggable
  group='task'
  v-model='dragItems'
  animation="1000">
    <transition-group tag="div" class="container">
      <div class="item" 
          :class="'item' + item.id"
          v-for="item in dragItems" :key="item.id"
          draggable="true"
          animation="1000">
         <div id="charts-demo4" v-if="item.id === 4" class='item-echarts'></div>
         <div id="charts-demo5" v-if="item.id === 5" class='item-echarts'></div>
         <div id="charts-demo6" v-if="item.id === 6" class='item-echarts'></div>
       </div>
    </transition-group>
</draggable>

data() {
  return {
    items: [
        { id: 1 },
        { id: 2 },
        { id: 3 }
      ],
    dragItems: [
        { id: 4 },
        { id: 5 },
        { id: 6 }
      ],
  }
}

methods: {
  addCollection (evt) {
    console.log('evt', evt)
    let newIndex = evt.newIndex
    console.log('this.dragItems', this.dragItems);  // 移出的元素已经不存在
    let menu = this.dragItems[evt.oldIndex]
    console.log('menu', menu)  // undefined
  }
}

需求：单模块和两个模块之间可以相互拖拽

问题：现在单模块之间可以拖拽，两个模块之间拖拽后不显示，F12查看元素移入的模块没有渲染出html，请问什么原因？

Answer 1

看看官方文档这个示例是如何实现的。