vue watch props

<template>
  <div>
    <ChildComponent :inputProp="parentData" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      parentData: 'Initial Value',
    };
  },
  watch: {
    parentData(newValue, oldValue) {
      console.log('New value:', newValue);
      console.log('Old value:', oldValue);
    },
  },
};
</script>

Explanation:

1. The <template> section contains the structure of the parent Vue component. It includes a <div> that houses the ChildComponent. The :inputProp attribute of ChildComponent is bound to the parentData property.

2. In the <script> section:

3. The import statement brings in the ChildComponent from a file named ChildComponent.vue.
4. The Vue component is defined with its components property, which includes the ChildComponent.

5. The data() method defines the parentData property with an initial value of 'Initial Value'.

6. The watch property within the Vue component defines a watcher for the parentData property. Whenever parentData changes, the function inside the watcher is triggered with two parameters: newValue and oldValue. In this case, it logs the new and old values to the console using console.log. ```