I have this code in my vue component

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

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?