Tengo este código en mi componente vue

 <template> <div class="container-fluid p-0"> <div class="row m-0"> <div class="col-12 vh-100 p-0" @drop="drop($event)" @dragover.prevent id="camView"> <canvas class="position-absolute top-0 end-0" ref="targetImg" id="targetImg"></canvas> <div class="position-absolute" id="selection" draggable="true" @dragstart="drag($event)"></div> <img src="@/assets/lu.jpeg" class="img-fluid" id="srcImg" ref="srcImg"> </div> </div> </div> </template> <script> export default { name: 'DropView', data() { return { } }, mounted() { }, methods: { drag(e) { console.log(e) e.dataTransfer.setData('text', e.target.id); }, drop(e) { console.log(e) e.preventDefault(); let data = e.dataTransfer.getData('text'); console.log(data) let box = document.getElementById(data) console.log(box) e.target.appendChild(box); } } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped lang="scss"> .col-12 { #selection { width: 360px; height: 240px; border-style: dashed; border-width: 1px; border-color: white; background-color: transparent; z-index: 1; } #target-img { overflow: hidden; width: 320px; height: 240px; z-index: 1; } #srcImg { height: 100%; display: block; width: 100%; object-fit: cover; } } </style>

Estoy tratando de usar arrastrar y soltar para mover un div que se coloca encima de una imagen. Puedo iniciar la operación de arrastre, pero cuando suelte el div en otra posición, aparecerá este error en la consola.

 Vue warn]: Unhandled error during execution of native event handler Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

He notado que el div desaparecerá y no se moverá. ¿Hay alguna solución?