Internal error when reordering async components

[mattheww-skyward]

First check https://github.com/SortableJS/Vue.Draggable/blob/master/CONTRIBUTING.md
I couldn't find details on what versions of sortablejs were compatible, and the link goes to Vue.Draggable for Vue 2. I used the most up to date versions of each library, instead.

Jsfiddle link

https://codepen.io/wartmanm/pen/OJKRWyM

Step by step scenario

1. Define a draggable component
2. Put an async component in the item slot
3. Try to reorder list elements

Actual Solution

An internal error in vuedraggable occurs:

 Uncaught TypeError: this.context is null
    onDragUpdate vuedraggable.js:266
    tt vuedraggable.js:20
    et vuedraggable.js:28
    G Sortable.min.js:2
    V Sortable.min.js:2
    _onDrop Sortable.min.js:2
    handleEvent Sortable.min.js:2
    h Sortable.min.js:2
    _onDragStart Sortable.min.js:2
    h Sortable.min.js:2
    _triggerDragStart Sortable.min.js:2
    o Sortable.min.js:2
    _prepareDragStart Sortable.min.js:2
    _onTapStart Sortable.min.js:2

Expected Solution

Dragging works normally.

Notes

Vuedraggable appears to assign __draggable_context before the async components have resolved and mounted, so it gets put on a placeholder comment tag that Vue later removes, leaving no reference to the real element. I think the same thing would happen with a dynamic component or a custom async loader.

This only happens if the async component is the root of the item slot, so it's fairly easy to work around by wrapping it in a div, once you know what's wrong.