Функция перетаскивания работает с дочерним элементом, но не работает с дочерним элементом к другому родительскому элементу в Vue JS Рекурсивное дерево?

Question

Я использую рекурсивный компонент, чтобы показать дерево.Я импортировал имя библиотеки vuedraggable внутри моего кода.

import draggable from 'vuedraggable'

он получает реквизиты как объект от имени другого компонента Vue 'graph'

props:{trees: Object},

это мой шаблон HTML

<template>

     <div class="trees" >
            <div :style="indent" class="divBox">
                <div> 
                    <!-- Expand child Button -->
                    <button v-if="hasChilds" v-on:click="open = !open,>˅</button>
                </div>
                {{ showName(trees) }}-{{trees.root}} 
                <div>
                    <!-- Adding child Button -->
                    <button v-on:click="addingData()" class="addButton">+</button>
                    <!-- Removing child Button -->
                    <button v-on:click="removingData()" class="removeButton"> - </button>
                    <!-- Editing Node Button -->
                    <button class="editButton" v-on:click="showEditMenu = !showEditMenu"> edit </button>
                    <div class="divEdit" v-if="showEditMenu">
                        <input type="text" id="inputTextField" v-model="editNode">
                        <!-- Button for Confirming the Edit -->
                        <button v-on:click="editingData(editNode)">Edit</button>
                        <button v-on:click="showEditMenu = !showEditMenu">cancel</button>
                    </div>

                    <!-- Dragging Node Button -->
                    <button class="dragButton" v-on:click="draggalbeChecker()">drag</button>
                </div>
            </div>

            <draggable v-model="propTrees.childs" :options="{}" >
                <graph
                    v-if="open"
                    v-for="tree in propTrees.childs"
                    :key="tree.root"
                    :trees="tree" >
                </graph>
            </draggable> 
    </div>

</template>

Мой перетаскивание иФункциональность drop отлично работает с дочерними элементами, но когда я хочу перетащить дочерний элемент к другому родительскому или другому родительскому дочернему элементу, это не работает.Вот мое выходное изображение дерева.Если нужно больше информации я могу предоставить.спасибо

.