How to watch child properties changes from parent component

I had a similar problem using a library which had some limitations.

Unfortunately, your watcher will not work.You have to use the function watcher to make this to work.And you have to use it inside the mounted hook.

  mounted() {
    this.$watch(
      "$refs.picker.popupVisible",
      (new_value, old_value) => {
         //execute your code here
      }
    );
  }

I also have an example. Please take a look here

What you can do is create a data object in parent component and include the date field in that data object and pass that data object to child component as props

<child :dateObj="dateObj"></child>
data: {
  dateObj: {
    date: ""
  }
}

And in child component you can use the date field of that dateObj props. This is possible because Vue doesn't watch the property of Objects passed as props and we can modify them without Vue complaining in console.

Thus the changed date field is reflected in parent as well.