title: Vue: How to update data in another *.vue file?
body: <p>I am new in Vue and I try to make a Cookie Clicker Clone. My problem is, I don't know how to update the value from <code>App.vue</code> in <code>Upgrade.vue</code>?</p>
  <p>I want to know how the Parent gives data to the Child and the Child updates the data and gives it back to the Parent and also the Child should update himself.</p>
  <p><strong>App.vue</strong></p>
  <pre><code>&lt;template&gt;
    &lt;div id=&quot;clickPower&quot;&gt;
      &lt;h1&gt;Click Power: {{summand}}&lt;/h1&gt;
    &lt;/div&gt;
  
    &lt;h1 id=&quot;clickPoint&quot;&gt;{{clickPoint}}&lt;/h1&gt;
  
    &lt;div id=&quot;cookie&quot;&gt;
      &lt;button @click=&quot;clicked&quot;&gt;
        &lt;img src=&quot;../res/img/Cookie.png&quot; alt=&quot;Cookie&quot;&gt;
      &lt;/button&gt;
    &lt;/div&gt;
  
    &lt;Upgrade /&gt;
  
  &lt;/template&gt;
  
  &lt;script&gt;
  import Upgrade from &quot;./components/Upgrade.vue&quot;;
  
  export default {
  
    name: &quot;App&quot;,
  
    data() {
      return {
        clickPoint: 0,
        summand: 1,
      };
    },
  
    components: {
      Upgrade,
    },
  
    methods: {
      clicked() {
        this.clickPoint += this.summand;
      },
    },
  };
  
  &lt;/script&gt;
  
  &lt;style scoped&gt;
  @import './assets/main.css';
  &lt;/style&gt;
  </code></pre>
  <p><strong>Upgrade.vue</strong></p>
  <pre><code>&lt;template&gt;
  
      &lt;div id=&quot;upClickCursor&quot;&gt;
          &lt;button @click=&quot;upClickCursor&quot;&gt;
              &lt;img src=&quot;../../res/img/Cursor.png&quot; alt=&quot;Cursor&quot;&gt;
          &lt;/button&gt;
  
          &lt;p&gt;{{cursorCost}}&lt;/p&gt;
      &lt;/div&gt;
  
      &lt;div id=&quot;upClickRecept&quot;&gt;
          &lt;button @click=&quot;upClickRecept&quot;&gt;
              &lt;img src=&quot;../../res/img/Recept.png&quot; alt=&quot;Recept&quot;&gt;
          &lt;/button&gt;
  
          &lt;p&gt;{{receptCost}}&lt;/p&gt;
      &lt;/div&gt;
  
  &lt;/template&gt;
  
  &lt;script&gt;
  import App from &quot;../App.vue&quot;;
  
  export default {
      name: &quot;Upgrade&quot;,
  
      data() {
          return {
              cursorCost: 10,
              receptCost: 20,
          };
      },
  
      // The methods are not working.
      methods: {
          upClickCursor() {
              if (App.clickPoint &gt;= this.cursorCost) {
                  App.clickPoint -= this.cursorCost;
                  App.summand += 1;
                  this.cursorCost += 15;
              }
          },
  
          upClickRecept() {
              if (App.clickPoint &gt;= this.receptCost) {
                  App.clickPoint -= this.receptCost;
                  App.summand += 3;
                  this.receptCost += 25;
              }
          }
      },
  };
  &lt;/script&gt;
  
  &lt;style scoped&gt;
  @import '../assets/Upgrade.css';
  &lt;/style&gt;
  </code></pre>