Cannot read property 'element' of null when using vue component

[lu-roth]

The same error occured within Vue.Draggabel for vue 2 as you can see in this issue:

https://github.com/SortableJS/Vue.Draggable/issues/647

It was fixed in Version 2.22.0 but seem to appear in version 4.1 for vue3.

When using a Vue component inside the template tag, an error occurs when dragging the elements which says Cannot read property 'element' of null

This won't work:

   <draggable
        class="draggable"
        :list="components"
        item-key="uuid"
        group="shared"
        animation="300"
        :key="components.length"
    >
      <template #item="{element}">
        <ZrmRow :isActive="chosenElement && chosenElement.uuid === element.uuid" :zrmComponent="element"/>
      </template>

But wrapped with a single div this does work:

 <draggable
       class="draggable"
       :list="components"
       item-key="uuid"
       group="shared"
       animation="300"
       :key="components.length"
   >
     <template #item="{element}">
       <div>
       <ZrmRow :isActive="chosenElement && chosenElement.uuid === element.uuid" :zrmComponent="element"/>
       </div>
     </template>

The error occurs in vuedraggable.js: this.context seems to be null

 onDragStart(evt) {
      this.context = this.getUnderlyingVm(evt.item);
      evt.item._underlying_vm_ = this.clone(this.context.element);
      draggingElement = evt.item;
    },

System info macOS 12.3.1 Node v18.1.0 npm 8.8.0

Packages vue 3.2.37 vuedraggable 4.1.0

Builder vite 2.9.12 @vitejs/plugin-vue 2.3.3 typescript 4.7.4 vue-tsc 0.38.3

Browser Chrome 106.0.5249.103

[Androphin]

This is relevant https://github.com/SortableJS/vue.draggable.next/pull/46

[mreduar]

This is still happening and I can't have an extra div because it is a table and everything is packed into one element. @lu-roth Have you found another solution?