I am trying to use Vue.draggable inside an upload dropzone of my own making.

Issue:

<draggable></draggable> is inside of the dropzone, so if I start dragging a list item from the draggable array it will trigger the dropzone drag and drop events instead of the draggable ones. Also, dragging files from OS over the <draggable></draggable> opens them and it does not add them to the list.

Uploading works fine only when I drag files from the OS over the dropzone

Vue File:

<template>
      <div
        @drop.prevent="drop"
        @dragover.prevent
        @dragenter.prevent="dragEnter"
        @dragleave.prevent="dragLeave"
        :class="`mid_container ${dragging ? 'dragging' : ''}`"
      >
        <div v-cloak class="file-manager">
          <div class="file-line header">
            <div class="file-name">File name:</div>
            <div class="file-size">Size:</div>
            <div class="action-buttons">Actions:</div>
          </div>

          <draggable
            class="file-manager draggable"
            v-model="currentFiles"
            ghost-class="ghost"
            @end="onEnd"
          >
            <transition-group
              class="file-manager transitionGroup"
              type="transition"
              name="flip-list"
            >
              <div
                :class="`sortable file-line ${file.status ? 'wrong-file' : ''}`"
                v-for="(file, index) in currentFiles"
                :key="file.name"
              >
                <!-- left  -->
                <div class="file-name">
                  {{ file.name }}
                  <span v-if="file.status">
                    <br />
                    {{ file.status }}
                  </span>
                </div>
                <!-- middle  -->
                <div class="file-size">{{ file.size }} kb</div>
                <!-- right -->
                <div class="action-buttons">
                  <span>
                    <i class="far fa-edit"></i>
                  </span>
                  <span @click.prevent="deleteFile(index)">
                    <i class="fa fa-trash" aria-hidden="true"></i>
                  </span>
                </div>
              </div>
            </transition-group>
          </draggable>
          
        </div>
      </div>
</template>

<script>
methods: {
    dragEnter(event) {
      event.preventDefault();
      this.drag_counter++;
      this.dragging = true;
    },
    dragLeave(event) {
      event.preventDefault();
      this.drag_counter--;
      if (this.drag_counter === 0) this.dragging = false;
    },
    drop(event) {
      event.preventDefault();
      this.drag_counter = 0;
      this.dragging = false;
      this.sendFiles(event);
    },
}
</script>

Can somebody point me out in the right direction on how to join the two ?