title: Call method from another component in Vue.js
body: <p>How do I call the method from another component in this scenario? I would like to load additional pice of data from the API once the button is clicked in the component 1 to the component 2.</p>
  
  <p>Thanks</p>
  
  <p>Here are my two components in the seperate files:</p>
  
  <p>compbutton.vue</p>
  
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;a href v-on:click="buttonClicked"&gt;Change Name&lt;/a&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      export default {
          name: 'compbutton',
          methods: {
              buttonClicked: function () {
                  //call changeName here
              }
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>compname.vue</p>
  
  <pre><code>&lt;template&gt;
      &lt;div&gt;{{name}}&lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      export default {
          name: 'compname',
          data: function () {
              return {
                  name: 'John'
              }
          },
          methods: {
              changeName: function () {
                  this.name = 'Ben'
              }
          }
      }
  &lt;/script&gt;
  </code></pre>