How to change dynamic data in another component in vuex?

Question

Vue.js

I have a question. There is an action that receives data via websocket and sends it through mutation in 2 different states.
Each component takes its own state.
In one component that launches the action, the data changes dynamically, in another component, the data changes if only the component is updated, although the data successfully flies to the console
. How can I make them update dynamically in another component as well?

actions: {
        play(ctx, array){

             axios.get('http://localhost/task_run?task_id='+array.id)
            var conn = new WebSocket('ws://localhost:8080', "protocol");
            conn.onmessage = function (ev) {
                ctx.commit('procent', {key:array.key, val:ev.data});
                ctx.commit('procentOne', {key:array.key, val:ev.data});
                console.log('Message: ', ev);
            };
        },
    },
    mutations: {
        procent(state, val){
            var array =  JSON.parse(val.val);
            state.process[val.key] = array.procent;
            state.processOnePersone[array.comp] = array.procent;
        }

    },
    state: {
        process: [],
        processOnePersone:[],
    },
    getters: {
        process(state){
            return state.process
        },
    processOnePersone(state){
            return state.processOnePersone;
        }
    }

<v-progress-circular
                                    :rotate="-90"
                                    :size="50"
                                    :width="5"
                                    :value="process[key]"
                                    color="primary"
                            >
                                {{ process[key] }}
                            </v-progress-circular>
             <script>
    import {mapGetters} from 'vuex';

    export default {
        name: 'taskListComponent',
        computed: {
            ...mapGetters(['process',]),
        },
    }

</script>

<v-progress-circular
                                    :rotate="-90"
                                    :size="50"
                                    :width="5"
                                    :value="processOnePersone[key]"
                                    color="primary"
                            >
                                {{ processOnePersone[key] }}
                            </v-progress-circular>
             <script>
    import {mapGetters} from 'vuex';

    export default {
        name: 'queueComponent',
        computed: {
            ...mapGetters(['processOnePersone',]),
        },
    }

</script>

Answer 1

Reactivity probably doesn't work, try replacing this:

state.process[val.key] = array.procent;
state.processOnePersone[array.comp] = array.procent;

on the

state.process.splice(val.key, 1, array.procent)
state.processOnePersone.splice(array.comp, 1, array.procent)

I guess val.keyand array.compare array indices