Question:

I am using the following dependencies in my project:

"vue": "^3.2.13",
"vuex": "^4.0.0"

I want to update a list of messages that should be updated every time an event fires, which happens quite frequently. However, the list of messages isn’t updating at all. This is my current setup:

Service:

this.event = (s, e) => {
    const newMessage = {
        id: new Date().getTime(),
        value: e.result.text,
    };
    this.messages.push(newMessage);
    updateStoreMessages();
};

private updateStoreMessages() {
    console.log('Trying to update store with messages:', this.messages);
    this.store.commit('SET_MESSAGES', [...this.messages]); /
    console.log('Store updated with messages:', this.messages);
}

Mutations:

const mutations = {
  SET_MESSAGES(state: SpeechStateWithService, messages: IMessage[]) {
    state.messages = messages;
    console.log('SET_MESSAGES:', state.messages);
  }
};

Component:

    import { useStore } from 'vuex';
    const store = useStore();
    const messages = computed(() => store.state.speech.messages);
    
    watch(isRecognizing, (newValue) => {
        console.log('isRecognizing updated in watch:', newValue);
    });