[Vuejs]-Identify if any data changing across all the Components – Vuejs

In the root component:

<template>
  <Comments @modified="dataUpdated = true"></Comments>
  <ProjectSelection @modified="dataUpdated = true"></ProjectSelection>
  <MessageArea @modified="dataUpdated = true"></MessageArea>
</template>

<script>
export default
{
  data()
  {
    return {
      dataModified: false,
      nextRoute: null,
    }
  },
  created()
  {
    window.addEventListener('beforeunload', this.pageLeave);
  },
  beforeDestroy()
  {
    window.removeEventListener('beforeunload', this.pageLeave);
  },
  beforeRouteLeave(to, from, next)
  {
    this.routeLeave(to, from, next);
  },
  methods:
  {
    routeLeave(to, from, next)
    {
      if(this.dataModified)
      {
        this.nextRoute = next;
        // show dialog to the user that there is unsaved data - it might call this.ignoreUnsaved
      }
    },
    ignoreUnsaved()
    {
      // hide the dialog
      if (this.nextRoute) this.nextRoute();
    },
    pageLeave(e)
    {
      if(this.dataModified)
      {
        const confirmationMessage = 'There is unsaved data. Ignore it and continue?';
        (e || window.event).returnValue = confirmationMsg;
        return confirmationMessage;
      }
    },
  }
}
</script>

In Comments.vue:

<template>
  <v-textarea v-model.trim="newComment" />
</template

<script>
export default
{
  data()
  {
    return {
      trackThisForChanges:
      {
         newComment: '',
      },
    }
  },
  watch:
  {
    trackThisForChanges:
    {
      deep: true,
      handler()
      {
        this.$emit('modified');
      }
    }
  }
}