title: how to update child component's property using props in vue js?
body: <p>I have a addToCart component(child) on foodList component(parent). and there is another component Cart. i want to reset the addToCart component's counter value to 0 whenever i will empty my cart.</p>
  
  <p><strong>App.vue</strong></p>
  
  <pre><code>data() {
    return {
      msg: "Welcome to Your Food Ordering App",
      foodData:[],
      cart:[],
      reset:false
   };
  },
  methods: {
    emptyCart:function(){
      this.reset = true;
      this.cart = [];
    }
  }
  </code></pre>
  
  <p><strong>foodList.vue</strong></p>
  
  <pre><code>export default {
    props:['foods','reset'],
    data() {
      return {
  
      };
    }
  }
  
  &lt;addToCart :reset="reset"&gt;&lt;/addToCart&gt;
  </code></pre>
  
  <p><strong>addToCart</strong></p>
  
  <pre><code>export default {
    props:['food','reset'],
    data(){
      return {
        counter:0
      }
    },
    beforeMount() {
      if(this.reset) {
        this.counter = 0;
      }
    }
  </code></pre>
  
  <p>in app.vue I'm modifying the reset property to "true" and then passing it to foodList.vue, then passing it to addToCart.vue.</p>
  
  <p>In addToCart.vue I'm checking if reset prop is true then set the counter to 0;</p>
  
  <p>But this is not working.let me know where am I missing?</p>
  
  <p>Please refer to this link for complete code.</p>
  
  <p><a href="https://github.com/spratap124/Food-Ordering" rel="nofollow noreferrer">food ordering app</a></p>