Draggable Vue Components

While replicating: https://sortablejs.github.io/Vue.Draggable/#/nested-example (code) I ran into an issue related to the model; how can I add draggable to vue components instead of

Solution 1:

If you have a component prop that's being mutated, there are multiple options:

1. Convert your prop to a custom v-model. It will allow two-ways bindings without problems. (Use the prop name value and sent $emit('input', this.value) to update it.
2. Use prop.sync modifier, which is kinda the same as using v-model but the prop has a specific name. Use :data.sync="myItems" on the parent, and run $emit('update:data', this.data) inside the component to update it.
3. Copy the prop to a data variable inside the component. So that the prop is only used as a default value for this data, but then it's only the data that's being mutated. But this won't allow the parent to see any modifications on that prop since it's not being updated directly.

<template>
  <draggable v-model="_data"></draggable>
</template>

<script>
props: {
  data: { type: Object, required: true }
}
data() {
  return {
    _data: {}
  }
}
mounted() {
  // Copy
  Object.assign(this._data, this.data)
}
</script>