VueJS draggable/sortable JSON doesn't update

Question

hey guys i am using this lib , at the moment i am trying just a simple sortable, imagine i have a array with 3 elements i want to change his positions with drags, i am able to doing it at the moment. The thing is, when i swich the places my JSON array doesn't update.

I am doing this:

my list:

 <draggable v-model="getDocumentAttributes">
        <div v-if="value.key != 'Document'" class="panel panel-primary" v-for="(value, key, index) in getDocumentAttributes">
            <div class="panel-body quote">
                <span @click="removeSection(index,key)" class="pull-right glyphicon glyphicon-remove text-info"></span>
                <p>{{value.key}}</p>
            </div>
        </div>
    </draggable>

my computed prop that listen to vuex getter:

getDocumentAttributes(){
    return this.$store.getters.getDocumentAttributes;
}

Finaly my list and my getter function at vuex side:

state: {
        document: { "id": "0", "atributes": [] },

[...]

  getDocumentAttributes: (state) => {
        return state.document.atributes;
    },

Answer 1

Use the local data in the vue component, this will be modified by vue-draggable.

It`s the same again, you can change a vuex-state only with mutations. Not with getters, not with computed attributes and not with actions. Computed properties are readonly by default here in the readme of the plugin you can see how to use them https://github.com/SortableJS/Vue.Draggable#with-vuex

Answer 2

getDocumentAttributes: {
    get () {
        return this.$store.getters.getDocumentAttributes;
    }
    set (value) {
        this.$store.commit('YOUR.COMMIT.TYPE', value)
    }
}

Reiner mentioned that computed properties are readonly by default. This is how to change that.