How to update the data on the page when updating the data in the store?

Question

Vue.js

I receive data from a websocket in store:
store.js :

state: {
  socket: {
     isConnected: false,
      message: '',
      wsData: {},
      reconnectError: false,
   }
}
mutations: {
...
SOCKET_ONMESSAGE (state, message)  {
...    
      let d = JSON.parse(message.data);
      console.log(d); 
      state.socket.wsData = d;
...
}

main.app:

...
<template>
  <div>
    <p> {{ d.someData }} </p>
  </div>
</template>

...

methods: {
    sendCalculation() {
      this.$socket.send(dataToServer);
    },
}
...
computed: {
    d(){
      return this.$store.state.socket.wsData;
    }
  },
...

Tried this.$forceUpdate();but no effect.

When data is received in the websocket, the data in the vue debug module is updated, the logs come. But the data on the page does not change. How to update data without reloading the page?

Answer 1

You don't have wsData property in state