How to correctly assign a value to a property in vue?

Question

Vue.js

Somewhere in the documentation it was said that the nested properties of an object cannot be directly assigned values, since vue will not be able to track their change.
For example, you can't do this: Instead, you need to use Vue.set: For some reason, the first option works for me. How right?
product.info.name = 'New value';
Vue.set(product.info, 'name', 'New value');

Answer 1

When creating an instance, Vue goes through all the available properties to the full depth and attaches getters and setters to them, which trigger internal mechanisms for reacting to property changes, making them reactive.
When you simply add a new property, no getters/setters are automatically attached to it, and Vue cannot track changes.
That is why to add new properties, you must use the Vue.set () method, which, when created through defineProperty, will initialize all internal reactivity mechanisms.