[résolu] Vuex + Vue.Draggable : [vuex] Do not mutate vuex store state

problème résolu : https://forum.vuejs.org/t/vuex-vue-draggable-vuex-do-not-mutate-vuex-store-state-outside/30802/5

Voici mon code final :

Structure.vue

<template>
    <div class="structure">
        <tree v-for="(value, key, index) in pages" :key="index" :name="key"></tree>
    </div>
</template>

<script>
    import tree from './Tree.vue'
    import axios from 'axios'

    export default {
        name: 'structure',
        components: {
            tree
        },
        computed: {
            pages: {
                get() {
                    return this.$store.state.pages
                },
                set(value) {
                    this.$store.commit('setPages', value)
                }
            }
        },
        created () {
            axios.get('/api/pages').then(response => {
                this.pages = response.data.pages
            })
        }
    }
</script>

Tree.vue

<template>
    <div>
        <h3>List {{name}}</h3>
        <draggable v-model="pagesGroup" :options="{group:{pull:true,put:true},animation: 150}" @end="handleDrop" class="sortable-list">
            <div v-for="page in pagesGroup" :key="page.id" class="sortable">{{page.title}}</div>
        </draggable>
    </div>
</template>

<script>
    export default {
        name: 'tree',
        props: [
            'name'
        ],
        computed: {
            pagesGroup: {
                get () {
                    return this.$store.state.pages[this.name]
                },
                set(value) {
                    this.$store.commit('setPagesGroup', {
                        value,
                        key: this.name,
                    })
                }
            }
        },
        methods: {
            handleDrop () {
                this.$store.dispatch('storePages')
            }
        },
        created () {
            console.log(this.pagesGroup);
        }
    }
</script>

store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    strict: true,
    state: {
        pages: {}
    },
    mutations: {
        setPages (state, pages) {
            state.pages = pages
        },
        setPagesGroup (state, { value, key }) {
            state.pages[key] = value
        }
    },
    actions: {
        storePages (context) {
            let jsonPages = JSON.parse(JSON.stringify(context.state.pages))
            console.log(jsonPages)
        }
    }
});