Keep vue component events after moving

I have the following vue component

<template>
  <div class="box"
       :data-target="dropAreaClass"
       :class="{ 'js-draggable': isDraggable }"
       :id="id"
       :draggable="isDraggable"
       @dragstart="dragStart"
       @dragend="dragEnd">
    {{ id }}
  </div>
</template>

<script>
  export default {
    name: 'ActionBox',
    props: {
      dropAreaClass: {
        default: 'js-droppable--any',
        type: String,
      },
      id: {
        default: null,
        type: String,
        required: true,
      },
      isDraggable: {
        default: true,
        type: Boolean,
      },
    },
    data: () => ({
      dropAreas: null,
    }),
    mounted() {
      this.dropAreas = document.querySelectorAll(`.${this.dropAreaClass}`);
    },
    methods: {
      dragEnd(event) {
        this.dropAreas.forEach(dropArea => {
          dropArea.classList.remove('drop');
        });

        event.currentTarget.classList.remove('dragging');
      },
      dragStart(event) {
        this.dropAreas.forEach(dropArea => {
          dropArea.classList.add('drop');
        });

        event.currentTarget.classList.add('dragging');
        event.dataTransfer.setData('text', event.currentTarget.id);
      },
    },
  };
</script>

This is a simple div which I can drag a drop into multiple columns in the parent component - once it is dropped in one of the target columns, the following function is fired to move the component to the column it is dropped in:

drop(event) {
  const droppedElement = document.getElementById(event.dataTransfer.getData('text'));

  if (event.currentTarget.classList.contains(droppedElement.dataset.target)) {
    event.currentTarget.prepend(droppedElement);
    event.currentTarget.classList.remove('drop');
  }
},

This all works fine, however, once it is dropped, I can no longer drag the component to another column as it seems to have lost all it's event bindings. Is there a way to keep the events after dropping?