How can I get relatedContext.element in Vue draggable in nested elements?

Question

This is my ElementsList component:

<template>
    <draggable :list="elements" v-bind="dragOptions" :move="handleMove" handle=".handle">
        <NestedElement
            v-for="(element, index) in elements"
            :key="`${element.id}_${index}`"
            :element="element"
            :is-expanded="isExpanded"
            :users="users"
            :moved-element="movedEvent"
        />
    </draggable>
</template>

<script>
import NestedElement from "../NestedElement.vue";
import draggable from "vuedraggable";

export default {
    components: {
        NestedElement,
        draggable,
    },
    props: {
        totalElements: {
            type: Array,
            required: true,
            default: () => [],
        },
        isExpanded: {
            type: Boolean,
            required: false,
            default: false,
        },
        expandableElement: {
            type: String,
            required: false,
            default: false,
        },
    },
    data() {
        return {
            elements: [],
            dragOptions: {
                group: "plan-elements",
                animation: 150,
                ghostClass: "ghost",
                forceFallback: true,
                fallbackOnBody: true,
                chosenClass: "dragging",
            },
            movedEvent: {},
        };
    },
    methods: {
        handleMove(event) {
            this.movedEvent = event;
        },
    },
    watch: {
        totalElements: {
            handler(newVal) {
                this.elements = newVal;

            },
            immediate: true,
        },
        movedEvent: {
            handler(newVal) {
                this.movedEvent = newVal;
            },
            immediate: true,
        },
    },
};
</script>

and this is my NestedElements component:

<template>
    <div>
        <ClimatePlanElement
            :element-details="elementDetails"
            @toggle-accordion="toggleAccordion"
            :has-child="hasChildElement"
            :is-expanded="isOpen"
            :expandable-element="expandableElement"
        />
        <draggable
            v-if="elementDetails.childElements && elementDetails.childElements.data"
            v-bind="dragOptions"
            class="child-elements-container"
            handle=".handle"
            :move="handleMove"
            :list="elementDetails.childElements.data"
        >
            <NestedElement
                v-if="isOpen || (isOpen && isAllOpen)"
                v-for="(childElement, index) in elementDetails.childElements.data"
                :key="`${childElement.id}_${index}`"
                :element="childElement"
                :is-open="isOpen"
                :is-expanded="isAllOpen"
                :expandable-element="expandableElement"
            />
        </draggable>
    </div>
</template>

<script>
import ClimatePlanElement from "./ClimatePlanElement.vue";
import draggable from "vuedraggable";

export default {
    name: "NestedElement",
    components: {
        ClimatePlanElement,
        draggable,
    },
    props: {
        element: {
            required: true,
            type: Object,
        },
        isExpanded: {
            type: Boolean,
            required: false,
            default: false,
        },
        expandableElement: {
            type: String,
            required: false,
            default: false,
        },
        movedElement: {
            type: Object,
            required: false,
            default: () => ({}),
        },
    },
    mounted() {
        this.getElementDetails(this.element.id);
    },
    data() {
        return {
            dragOptions: {
                group: "plan-elements",
                animation: 150,
                ghostClass: "ghost",
                forceFallback: true,
                fallbackOnBody: true,
                chosenClass: "dragging",
            },
            isAllOpen: false,
            isOpen: false,
            elementDetails: {},
        };
    },
    computed: {
        hasChildElement() {
            if (this.elementDetails.childElements) {
                return this.elementDetails.childElements.data.length ? true : false;
            }
        },
    },
    methods: {
        toggleAccordion(isOpen) {
            this.isOpen = isOpen;
        },
        handleMove(event) {
            this.isOpen = true;
            if (!event || !event.draggedContext || !event.relatedContext) {
                return;
            }

            const movedElement = {
                type: event.draggedContext.element.type,
                id: event.draggedContext.element.id,
            };

            console.log(event.relatedContext.element); //this does not contain anything
        },
        async getElementDetails(id) {
            //API call for getting the element details
        },
    },
    watch: {
        isExpanded: {
            handler(newVal) {
                this.isAllOpen = newVal;
                this.isOpen = newVal;
            },
        },
        element: {
            handler(newVal) {
                if (newVal) {
                    this.getElementDetails(newVal.id);
                }
            },
            immediate: true,
        },
    },
};
</script>

And my view is like this:

So I am dragging Element E into Element D but I don't get information about Element E. Usually, event.relatedContext.element should exist but in this situation it doesn't. How can change my drag and drop in case of this scenario? Eventually, my target is to get the information of draggedElement and information about the element where draggedElement dragged into (parent element).