where on earth is vue-draggable item move to? - vue.js

Question

I use nested draggable and listen events while drag, then find out that if i drag a itemA into itemB, event throws:
event add => newIndex, element.
event removed => oldIndex, element.
It tells me that itemA's index in itemB, but where on earth i konw who is itemB. something I missed? :3
I found it's hard to write a vue-draggable nested-component between 2 pages, i put a simple code to review it in your own computer(not really mine, copy official doc and little change ). code below
<template>
<div class="row">
<div class="col-8">
<h3>Nested draggable</h3>
<nested-draggable :tasks="list" />
</div>
</div>
</template>
<script>
import nestedDraggable from "./infra/nested";
export default {
name: "nested-example",
display: "Nested",
order: 15,
components: {
nestedDraggable
},
data() {
return {
list: [
{
name: "task 1",
tasks: [
{
name: "task 2",
tasks: []
}
]
},
{
name: "task 3",
tasks: [
{
name: "task 4",
tasks: []
}
]
},
{
name: "task 5",
tasks: []
}
]
};
}
};
</script>
<style scoped></style>
and infra/nested
<template>
<draggable class="dragArea" tag="ul" :list="tasks" :group="{ name: 'g1' }" #change="changed">
<li v-for="el in tasks" :key="el.name">
<p>{{ el.name }}</p>
<nested-draggable :tasks="el.tasks" />
</li>
</draggable>
</template>
<script>
import draggable from "#/vuedraggable";
export default {
props: {
tasks: {
required: true,
type: Array
}
},
components: {
draggable
},
name: "nested-draggable",
methods: {
changed (event) {
console.log(event)
}
}
};
</script>
<style scoped>
.dragArea {
min-height: 50px;
outline: 1px dashed;
}
</style>
So far, pass a el.list can calculate its index with save level element, though, drag in a empty list need to be prevented.