Why does reactivity disappear when objects are merged?

Question

Vue.js

If I write

let object1 = reactive({ });
    let object2 = { test: 123 }
    object1.name = object2.test;

Object reactivity works.
But if you combine an object with another

let object1 = reactive({ });
     let object2 = { test: 123 }

                    object1 = {
                        ...object1,
                        ...object2
                    };

The reactivity is gone.

What could be the problem?

Answer 1

Because you are replacing a reactive object with a normal one.
Instead of assigning a new object, add the properties of one to another:
Object.assign(object1, object2);
Well, or wrap the new object in reactive, just like the old one.