title: Identify if any data changing across all the Components - Vuejs
body: <p>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.</p>
  <p>For example, I am having Vue class &quot;createProject.vue&quot;:</p>
  <pre><code>&lt;template&gt;
     &lt;Comments&gt;&lt;/Comments&gt;
     &lt;ProjectSelection&gt;&lt;/ProjectSelection&gt;
     &lt;MessageArea&gt;&lt;/MessageArea&gt;
  &lt;/template&gt;
  </code></pre>
  <p>class Comments.vue,</p>
  <pre><code>&lt;template&gt;
    &lt;v-textarea
      id=&quot;input--comments&quot;
      name=&quot;Comments&quot;
     &gt;&lt;/v-textarea&gt;
  &lt;/template&gt;
  </code></pre>
  <p>class ProjectSelection.vue,</p>
  <pre><code>&lt;template&gt;
    &lt;div&gt;
    &lt;v-text-field
      id=&quot;input--email&quot;
      :label=&quot;Email&quot;
    &gt;&lt;/v-text-field&gt;
  &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  <p>class MessageArea.vue,</p>
  <pre><code>&lt;template&gt;
    &lt;v-textarea
      id=&quot;input--message-area&quot;
      name=&quot;message&quot;
     &gt;&lt;/v-textarea&gt;
  &lt;/template&gt;
  </code></pre>
  <p>When I move to the next screen, I want to know is there any data has been changed or not.</p>
  <p>Kindly help me to identify the data changes across all the components.</p>