fix: Avoid crashing when updated triggered before rendering

[SylvainBigonneau]

This fixes an error that occurs when the list is first rendered empty: in some cases, upon adding the first item, it will not be rendered yet, therefore _ref.el will be null when it is checked and this crashes the lib.

[David-Desmaisons]

@SylvainBigonneau Do you have an example of such problems?

[baptistejamin]

Hello @SylvainBigonneau and @David-Desmaisons !

We are currently moving the Crisp app to Vue 3, and it uses vue.draggable

We are facing the exact problem. In our case, the :list key is based on a computed properly, itself based on a VueX array.

In a such case, a race condition seems to occur in the draggable component, and this.componentStructure is undefined.

This PR seems to fix the problem

[baptistejamin]

Well, we just found the root of this problem :)

Since we are moving our app from Vue 2 to Vue 3, we are using the @vue/compat package.

We are now using this:

const draggableComponent = defineComponent({
  compatConfig: {
    RENDER_FUNCTION: false,
  },

By disabling the RENDER_FUNCTION we are forcing Vue to use the Vue 3 render mode.

[Androphin]

If I patch the parts of the code with that fix I still get an error with this.context is null when onDragStart is triggered. It looks like it has to do with v-model used on the draggable component and the properties __draggable_context or underlying_vm aren't applied to the elements.

I figured out that it has to do with keys that aren't applied to the transitition-group if tag="transition-group" is set on the draggable component. https://github.com/SortableJS/Vue.Draggable/issues/144