SOURCE

let vm = new Vue({
  el: '#main',
  data: {
    options: {
      group:'peoplea',
      animation: 150
    },
     myArray: [
        {id: 'a', name:'testa'},
        {id: 'b', name: 'testb'},
       {id: 'c', name: 'testc'}
     ],
    myArray2: [
     ]
  },
  methods: {
    addItem(e) {
      console.info(e)
       let chart = this.myArray2[e.newIndex]
       document.getElementById(chart.id).onclick = function() {
         alert(chart.id)
       }
    }
  }
})

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<!-- CDNJS :: Sortable (https://cdnjs.com/) -->
<script src="//cdn.jsdelivr.net/npm/sortablejs@1.8.4/Sortable.min.js"></script>
<!-- CDNJS :: Vue.Draggable (https://cdnjs.com/) -->
<script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.20.0/vuedraggable.umd.min.js"></script>

<div class="main" id="main">
<div id="app"  class="col1">
  <draggable v-model="myArray" :options="options" class="list-group">
     <div v-for="element in myArray" :key="element.id" >{{element.name}}</div>
  </draggable>
</div>

<div id="phone" class="col2">
  <draggable v-model="myArray2":options="options" class="list-group" @Add="addItem">
     <div v-for="element in myArray2" :id="element.id" :key="element.id" class="my-handle">{{element.name}}</div>
  </draggable>
</div>
  
</div>

.my-handle {
  border:1px red solid;width:200px;height:100px;margin:10px;
  display: inline-block;
  cursor: move;
}

.main {
 display: flex;

}
.col1 {
  flex:1;
  background-color: antiquewhite;
  min-height:200px;
}

.col2 {
   flex:1;
   background-color: beige;
  min-height:200px;
}
.list-group{
  min-height:100px;
  border:1px red solid;
}
.sortable-drag {
  background: yellow;
}
.sortable-drag {
  border: 1px red solid;
  height:20px;
}