How to make object properties reactive?

Question

Vue.js

Hello. I receive a response from the server

{
                id1: {
                    name: 'name',
                    value: 1245,
                },
                id2: {
                    name: 'name',
                    value: 1245,
                },
            };

I am printing out this object of objects via v-for in li, but when the data is requested again, there is no redraw. From the documentation, I realized that during initialization, reactivity is simply not added to these fields, because they don't exist yet. How to correctly add reactivity to these fields? I am using Vue 3.

Answer 1

In general, the whole point was that the incoming response from the server was not a new object, but mutated the same object bypassing the vue proxy, so there was no redrawing. Possible solutions: make incoming data reactive, or

this.data = undefined; 
this.data = receivedData;

or
this.data = {...receivedData};

Answer 2

You write to the storage ( vuex ) and change them to the state, then you can send the modified data if necessary