Identify if any data changing across all the Components - Vuejs

Question

In my single page application, a screen consist of multiple components. I want to know is there any data has been modified/changed in the screen across all the component when we move to next screen.

For example, I am having Vue class "createProject.vue":

<template>
   <Comments></Comments>
   <ProjectSelection></ProjectSelection>
   <MessageArea></MessageArea>
</template>

class Comments.vue,

<template>
  <v-textarea
    id="input--comments"
    name="Comments"
   ></v-textarea>
</template>

class ProjectSelection.vue,

<template>
  <div>
  <v-text-field
    id="input--email"
    :label="Email"
  ></v-text-field>
</div>
</template>

class MessageArea.vue,

<template>
  <v-textarea
    id="input--message-area"
    name="message"
   ></v-textarea>
</template>

When I move to the next screen, I want to know is there any data has been changed or not.

Kindly help me to identify the data changes across all the components.

Answer 1

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');
      }
    }
  }
}