Состояние инициализации Vuex отменяет изменения в смонтированном

Question

У меня есть переменная в моем магазине, я изменяю ее в смонтированном свойстве (посредством действия и мутации), но она возвращается к исходному значению из хранилища.

(я пытался скнопка в 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" 
}

проблема : в моей консоли у меня есть следующее: ОДИН, ДВА, ТРИ, watchTHREE, watchONE.

Возвращается к ОДНОМУ, начальному значению в магазине (я вижу ТРИ в течение полсекунды, затем идетобратно в ОДИН)

Мой вопрос: почему возвращается первоначальное значение? Я должен делать что-то не так. И возможно ли сделать значение ТРИ пребывания?

store / index.js:

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

in store / mutation.js:

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

store / action.js

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

export default {
  setHola
}