Vuex.Опять же: вычисленные свойства не обновляются после изменений Store.Самый простой пример

Question

Я действительно прочитал весь Google!

• Свойство магазина "sProp" имеет начальное значение (= 10);
• Я использую Action from component для изменения свойства;
• Действие COMMITS мутация внутри модуля Store;
• Мутация использует "Vue.set (...", как рекомендуется во многих билетах
• Компонент использует mapState, mapGetters, mapActions (!!!)
• Я также привлекаю Vuex, как советовали.

Я вижу начальное состояние 10. Но оно не изменяется после нажатия кнопки. Однако, если я сохраняю console.log Store, я вижу, что он изменился. Он также изменяется в памяти только один раз после первого нажатия, но шаблон всегда показывает 10 для обоих вариантов. Все остальные прессы не меняют значения.

Проблема: мое вычисленное свойство НЕ РЕАКТИВНО!

Рассмотрим простейший пример. Имена файлов в комментариях.

// File: egStoreModule.js
import * as Vue    from "vue/dist/vue.js";

const state = {
    sProp:         10,
};

const getters   = {
    gProp: (state) => {
        return state.sProp;
    }
};
const mutations = {
    //generic(state, payload) {},
    mProp(state, v) {
        Vue.set(state, "sProp", v);
    },
};
const actions   = {
    aProp({commit}, v) {
        commit('mProp', v);
        return v;
    },
};

export default {
    namespaced: true
    , state
    , getters
    , mutations
    , actions
}

И это потребитель:

// File: EgStoreModuleComponent.vue
<template>
    <!--<div :flag="flag">-->
    <div>
        <div><h1>{{sProp}} : mapped from Store</h1></div>
        <div><h1>{{$store.state.egStoreModule.sProp}} : direct from Store</h1></div>
        <button @click="methChangeProp">Change Prop</button>
        <button @click="log">log</button>
    </div>
</template>

<script>
    import {mapActions, mapGetters, mapState} from "vuex";

    export default {
        name:     'EgStoreModuleComponent',
        data() {
            return {
                flag:      true,
            };
        },

        computed: {
            ...mapState('egStoreModule', ['sProp']),
            ...mapGetters('egStoreModule', ['gProp'])
        },

        methods: {
            ...mapActions('egStoreModule', ['aProp']),

            methChangeProp() {
                const value = this.sProp + 3;
                this.aProp(value);
                //this.flag = !this.flag;
            },

            log() {
                console.log("log ++++++++++");
                console.log(this.sProp);
            },
        }
    }
</script>

<style scoped>
</style>

Вот как я присоединяю модуль Store к приложению:

// File: /src/store/index.js
import Vue           from 'vue'
import Vuex          from 'vuex'
import collection    from "./modules/collection";
import egStoreModule from "./modules/egStoreModule";

Vue.use(Vuex);

export const store = new Vuex.Store({
    state: {},
    getters : {},
    mutations: {},
    actions : {},
    modules : {
        collection,
        egStoreModule
    }
});

Наконец: main.js

import Vuex       from 'vuex'
import {store}    from './store'
//...
new Vue({
    el:     '#app',
    router: router,
    store,
    render: h => h(App),
})

• Все это работает, если только я использую поле "флаг", как показано в комментариях.
• Это также работает, если я прыгаю со страницы и обратно с Vue-router.
• async / await не помогает.
• Я удалил все под node_modules и запустил npm install.
• Все версии Vue / Vuex являются самыми последними.