Vue.draggable: Nested draggable vuex example throws error about mutating vuex store

[andrewhl]

I get the following Vuex error when I try to use the nested vuex example in a quasar application:

[Vue warn]: Error in callback for watcher "function () { return this._data.$$state }": "Error: [vuex] do not mutate vuex store state outside mutation handlers."

(found in <Root>)
Error: [vuex] do not mutate vuex store state outside mutation handlers.
    at assert (vuex.esm.js?2f62:90)
    at Vue.store._vm.$watch.deep (vuex.esm.js?2f62:774)
    at Watcher.run (vue.runtime.esm.js?2b0e:4562)
    at Watcher.update (vue.runtime.esm.js?2b0e:4536)
    at Dep.notify (vue.runtime.esm.js?2b0e:730)
    at Array.mutator (vue.runtime.esm.js?2b0e:882)
    at updatePosition (vuedraggable.common.js?310e:3091)
    at VueComponent.alterList (vuedraggable.common.js?310e:3071)
    at VueComponent.updatePosition (vuedraggable.common.js?310e:3094)
    at VueComponent.onDragUpdate (vuedraggable.common.js?310e:3190)

Jsfiddle link

I created a codesandbox, but the error doesn't show up in the console on there. It does show up if I reproduce the same application using quasar create, and copy the store/elements folder as well as the NestedTest and NestedListTest components over.

https://codesandbox.io/s/vue-quasar-latest-working-uj2k5

Step by step scenario

CLI

1. quasar create
2. yarn add vuedraggable
3. copy store/elements from code
4. copy components/NestedTest and components/NestedTodoList to components
5. your pages/Index.vue should simply be:

<template>
  <q-page class="flex flex-center">
    <NestedListTest />
  </q-page>
</template>

<style></style>

<script>
import NestedListTest from "components/NestedListTest";
export default {
  name: "PageIndex",
  components: {
    NestedListTest
  }
};
</script>

1. run quasar dev

Here is a video from my localhost app which demonstrates the issue.

[David-Desmaisons]

Hello @andrewhl , well it is a vuex error not linked to vue.draggable. You have to use v-model binding and use computed value to commit the store when the list changed.
Please check the documentation and the example:
https://sortablejs.github.io/Vue.Draggable/#/nested-with-vmodel

[ddenev]

The most probable reason for all those "Error: [vuex] do not mutate vuex store state outside mutation handlers" error is the strict mode setting in the store.

The Vue.Draggable examples do not use strict mode for the store and that is why there are no errors when the store state is mutated within the draggable (which happens every time you use the :list property to pass a store state to the draggable).

If you pay close attention you will see that in the examples the top level elements of the tree are passed via :value to the draggable and via @input back to the store (that is why it works for the top level elements), while the nested elements are passed to the draggable via its :list prop.

I think the nested example should be extended to cover the case when we have strict mode set for the store (which is recommended during development).