title: How can I change data value from one component to another component in Vue Js?
body: <p>I am new in Vue Js. So, I am facing a problem to changes data value from another component.</p>
  
  <p>I have a component A:</p>
  
  <pre><code>&lt;template&gt;
     &lt;div id="app"&gt;
        &lt;p v-on:click="test ()"&gt;Something&lt;/p&gt;
     &lt;/div&gt;
  &lt;/template&gt;
  
  import B from '../components/B.vue';
  export default {
      components: {
          B
      },
      methods: {
          test: function() {
              B.data().myData = 124
              B.data().isActive = true
              console.log(B.data().myData);
              console.log(B.data().isActive);
          }
      }
  }
  </code></pre>
  
  <p>Component B:</p>
  
  <pre><code>export default {
      data() {
          return {
              myData: 123,
              isActive: false
  
          }
      }
  
  }
  </code></pre>
  
  <p>It still component B data.
  But it cannot be affected component B data. I want to data changes of component B from component A. How can I do that?  </p>
  
  <p>Please explain me in details. I have seen vue js props attribute but I don't understand. </p>