Vue перетаскиваемая вставка и обновление

Question

Я хотел бы сделать два списка с view-dragggable и иметь возможность вставлять и обновлять из одного списка в другой.

Например, в jsfiddle ниже я хочу вставить 'two' из нижнего списка в верхний список, но также я хочу заменить 'thee' вверху на 'three' внизу. Это вообще возможно?

<div id="app">
  <h2>Drop and Insert</h2>
      <h4>Top</h4>
        <draggable v-model="top" :options="{group:{put: 'numbers'}}" @change="topChange">
          <div v-for="(element, index) in top" :key="index">{{element}}</div>
        </draggable>

      <h4>Bottom</h4>
      <draggable v-model="bottom" :options="{group: {name: 'numbers', pull: 'clone', revertClone : true}}">
        <div v-for="(element, index) in bottom" :key="index">{{element}}</div>
      </draggable>
</div>

new Vue({
  el: "#app",
  data: {
     top: [ 'one', 'thee', 'four'  ],
    bottom: [ 'one', 'two', 'three' ]
  },
  methods: {
    topChange(v) {
        console.log("topchange %o", v) ;
    }
  }
})

https://jsfiddle.net/9omb1zL6/

Я прочитал этот вопрос, но это не помогает в моем случае:

Vue.Draggable: Как "перетащить элемент на другой элемент" вместо добавления / удаления

ОБНОВИТЬ

Я добился прогресса, добавив область под списком. Несмотря на то, что это улучшение, я все же хотел бы иметь возможность вставлять непосредственно между элементами списка без предварительного удаления, а затем перемещения.

https://jsfiddle.net/9omb1zL6/3/

соответствующий код:

onMove(evt) {
    this.targetElement = evt.relatedContext.element;
  this.draggedElement = evt.draggedContext.element;
    return false;
},
startDrag(evt) {
    this.targetElement = null;
  this.draggedElement = null;
},
endDrag() {
console.log("target %o, dragged %o", this.targetElement, this.draggedElement) ;
    if (this.targetElement == null) {
    this.top.push(this.draggedElement) ;
  }
  else {
    const ind = this.top.indexOf(this.targetElement) ;
    this.top.splice(ind, 1, this.draggedElement)
  }
}