Javascript Vuex init状态覆盖已装入的

我的存储中有一个变量，我在装入的属性中更改它（通过一个操作和一个突变），但它会从存储返回初始值

（我在html中尝试了一个按钮，在那里更改变量效果很好。）

在我的组件中，您可以找到：

<template>
  <div id="stuff">
    <h1> some random word: {{ hola }}</h1> <-------- problem is here: it prints always ONE instead of THREE)
    <button @click="UPDATE_HOLA('carlos')" text="clickkkBTN"/>
  </div>
</template>

...
methods: {
    ...mapActions(['setHola']),
    ...mapMutations(['UPDATE_HOLA']),
  },
computed: {
    ...mapState(['hola']),
},
watch: {
    hola(newVal){
      console.log('watch' + newVal)
    }
},
mounted() {
    console.log(this.hola); //prints "ONE" (initial value in store)
    this.setHola('TWO');
    console.log(this.hola); //prints "TWO" 
    this.UPDATE_HOLA('THREE');
    console.log(this.hola); //prints "THREE" 
}

export default new Vuex.Store({
  state: {
    hola: 'ONE',
  },
  getters,
  mutations,
  actions,
});

  [types.UPDATE_HOLA](state, payload) {
    state.hola = payload;
  },

店内/mutation.js:

<template>
  <div id="stuff">
    <h1> some random word: {{ hola }}</h1> <-------- problem is here: it prints always ONE instead of THREE)
    <button @click="UPDATE_HOLA('carlos')" text="clickkkBTN"/>
  </div>
</template>

...
methods: {
    ...mapActions(['setHola']),
    ...mapMutations(['UPDATE_HOLA']),
  },
computed: {
    ...mapState(['hola']),
},
watch: {
    hola(newVal){
      console.log('watch' + newVal)
    }
},
mounted() {
    console.log(this.hola); //prints "ONE" (initial value in store)
    this.setHola('TWO');
    console.log(this.hola); //prints "TWO" 
    this.UPDATE_HOLA('THREE');
    console.log(this.hola); //prints "THREE" 
}

export default new Vuex.Store({
  state: {
    hola: 'ONE',
  },
  getters,
  mutations,
  actions,
});

  [types.UPDATE_HOLA](state, payload) {
    state.hola = payload;
  },

store/action.js

const setHola = ({ commit }, payload) => {
  commit(types.UPDATE_HOLA, payload);
};

export default {
  setHola
}