Draggable vue components

While replicating:



I ran into an issue related to the model; how can I add draggable to vue components instead of a raw json (as used in the example).

What I want to do is, add drag and drop to:


(each item can be moved ("dragged") from one group to another, each group can be dragged from a lower position to an upper one (and vice-versa).

I tried:


and get:

Unexpected mutation of "itemSectionData" prop. (vue/no-mutating-props)

but in this case the data comes from (through?) a prop.

The hierarchy of components is:

ChromePage –> InventorySectionC –> InventorySectionGroupC –> InventorySectionGroupItemC

I need components instead of plain JSON as each component has additional features (e.g. CRUD).

How should I go about combining components with draggable?

Source: Ask Javascript Questions