Javascript - Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'

I have this code in my vue component

  <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">


export default {
  name: 'DropView',
  data() {
    return {

  mounted() {
  methods: {
    drag(e) {
    drop(e) {
      let data = e.dataTransfer.getData('text');
      let box = document.getElementById(data)

<!-- 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;

I'm trying to use drag and drop to moove a div that is positioned on top of an image. I'm able to start the drag operation but when I release the div into another position I will get this error in console

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'.

I've noticed that the div will disappear and is not mooved. Is there any fix?

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum