I am trying do develop my own simple drag and drop functionality for a form builder. I have got a list of items which is rendered in a v-for loop with a computed property. On onDragStart I set the state isDragging. This should alter the list in the computed property and insert some slots where I can drop the dragged item. But immediatly after dragging an item, it triggers the onDragEnd Event.

Initialy i was missing the :key property, but adding it didnt solve the problem. Hopefully someone knows a solution or has an idea whats wrong.

Here is a Link to the code: https://jsfiddle.net/elrihor/vwb3k6qc/49/

Vue.createApp({
  data() {
    return {
      list: [{
          id: 'i1',
          name: 'Apfel',
        },
        {
          id: 'i2',
          name: 'Banane',
        },
        {
          id: 'i3',
          name: 'Kirsche',
        },
        {
          id: 'i4',
          name: 'Orange',
        },
      ],
      props: {
        item: {
          props: {
            draggable: true,
            ondragstart: ($event) => {
              this.startDrag();
            },
            ondragend: ($event) => {
              this.endDrag();
            },
          },
        },
        slot: {
          props: {
            ondrop: ($event) => {
                $event.preventDefault();
              this.onDrop($event);
            },
            ondragover: ($event) => {
                $event.preventDefault();
            }
          },
        },
      },
      isDragging: false
    }
  },
  computed: {
    dragList() {
      let dragList = this.list;

      if (this.isDragging) {
        dragList = dragList.reduce((r, a) => r.concat(a, {
          type: 'slot',
          name: 'Slot'
        }), [{
          type: 'slot',
          name: 'Slot'
        }]);
      }

      dragList = dragList.map((item, index) => {
        return {
          ...item,
          id: !item.id ? 's' + index : item.id,
          type: item.type == 'slot' ? 'slot' : 'item',
        };
      });

      return dragList;
    }
  },
  methods: {
    getProps(type) {
      return this.props[type].props;
    },
    startDrag() {
      console.log('start');
      this.isDragging = true;
    },
    endDrag() {
      console.log('end');
      this.isDragging = false;
    },
    onDrop(e) {
      console.log('drop');
    }
  }
}).mount('#app')