How to track specific property in vue 3 object?

Question

JavaScript

Hello.
We use vue3. composition API. watch method.
The bottom line is that we track the object initially with a number of nested properties.
watch(object, (params) => callback);
But it is necessary to track not all the properties of the object, but only a certain one. For example, there is an object.
const object = {property_1: 'value1', property_2: 'value2', property_3: 'value_3'}
Interested in tracking property changes only property_1

Answer 1

Everything is simple. Use watch on a reactive object

// ...
 const obj = reactive({
      prop1: 'prop1',
      prop2: 'prop2'
    })
watch(
      () => obj.prop1,
      (prop1, prevProp1) => {
        console.log("#######");
        console.log("Lets watch:");
        console.group();
        console.log("obj.prop1: " + prop1);
        console.log("Old prop1: " + prevProp1);
        console.groupEnd();
        console.group();
        console.log("Prop2: " + obj.prop2);
        console.groupEnd();
        console.log("End watch.");
        console.log("#######");        
      }
    )
//...

Here is an example: