title: Avoid mutating a prop directly in VueJS 2
body: <p>First of all, I am just starting playing with VueJS, so this cannot be a VueJS version thing as suggested <a href="https://stackoverflow.com/questions/41215773/getting-avoid-mutating-a-prop-directly-since-the-value-will-be-overwritten-whene">here</a></p>
  
  <p>It might be a duplicate of :</p>
  
  <ul>
  <li><a href="https://stackoverflow.com/questions/42522266/how-to-solve-vue-warn-avoid-mutating-a-prop-directly-since-the-value-will-be">How to solve [Vue warn]: Avoid mutating a prop directly since the value will be overwritten on vue.js 2?</a> - the difference is that I am only trying to set the values with <code>v-bind</code>, once.</li>
  <li><a href="https://stackoverflow.com/questions/40574661/avoid-mutating-a-prop-directly-since-the-value-will-be-overwritten">Avoid mutating a prop directly since the value will be overwritten</a> - This also looks somehow similar, but the solution didn't worked for me.</li>
  <li><a href="https://stackoverflow.com/questions/40311459/whats-the-correct-to-modify-vue-component-via-javascript">What&#39;s the correct to modify VUE component via javascript?</a> - this solution looks pretty much what I have in my case</li>
  <li><a href="https://stackoverflow.com/questions/40915436/vuejs-update-parent-data-from-child-component">vuejs update parent data from child component</a></li>
  </ul>
  
  <p>My problem starts with my Html looking like this:</p>
  
  <pre><code>&lt;div id="app"&gt;
    &lt;div class="row"&gt;
      &lt;div class="form-group col-md-8 col-md-offset-2"&gt;
        &lt;birthday-controls
         :birthDay="birthDay"
         :birthMonth="birthMonth"
         :birthYear="birthYear"&gt;
        &lt;/birthday-controls&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and JS:</p>
  
  <pre><code>Vue.component('birthday-controls', {
  
      template: `&lt;div class="birthday"&gt;
      &lt;input type="text" name="year"  placeholder="yyyy" v-model="birthYear" size="4" maxlength="4"/&gt;
      &lt;input type="text" name="month" placeholder="mm" v-show="validYear" v-model="birthMonth" size="3" maxlength="2"/&gt;
      &lt;input type="text" v-show="validYear &amp;&amp; validMonth" name="day" placeholder="dd" v-model="birthDay" size="2" maxlength="2"/&gt;
    &lt;/div&gt;`,
  
      props: ['birthDay', 'birthMonth', 'birthYear'],
  
      computed: {
          validYear: function() {
              return (this.birthYear &gt; new Date().getFullYear()-100 &amp;&amp; this.birthYear &lt; new Date().getFullYear()-14)
          },
          validMonth: function() {
              return (this.birthMonth &gt; 0 &amp;&amp; this.birthMonth &lt;= 12)
          },
          validDay: function() {
              return (this.birthDay &gt; 0 &amp;&amp; this.birthDay &lt;=31) //I have to add more checking here for february, leap years and ....
          }
      }
  
  });
  
  new Vue({
      el: '#app',
  
      data: function() {
          return {
              birthDay: "",
              birthMonth: "",
              birthYear: ""
          }
      },
  
  });
  </code></pre>
  
  <p>I have prepared codepen here: <a href="http://codepen.io/AngelinCalu/pen/OpXBay" rel="noreferrer">http://codepen.io/AngelinCalu/pen/OpXBay</a></p>
  
  <p>However, the second answer from here: <a href="https://stackoverflow.com/questions/40915436/vuejs-update-parent-data-from-child-component">vuejs update parent data from child component</a> makes me realise that I'm missing something</p>
  
  <p>In that example it sets an <code>this.$emit('increment')</code> inside one of the methods, and triggers that on specific event.</p>
  
  <p>In this other example: <a href="https://stackoverflow.com/questions/41895674/update-a-childs-data-component-to-the-father-component-in-vue-js-using-vue-web">Update a child&#39;s data component to the father component in vue.js using .vue webpack(vue2)</a> , the answer suggest adding a <code>watch</code> to emit the change.</p>
  
  <pre><code>  watch: {
      val() {
        this.$emit('title-updated', this.val);
      }
    }
  </code></pre>
  
  <p>Now I'm even more confused! What is the right (or best) way to deal with this problem?</p>
  
  <p>Note:
  If I remove from the initial <code>html</code> :</p>
  
  <pre><code>   :birthDay="birthDay"
     :birthMonth="birthMonth"
     :birthYear="birthYear"
  </code></pre>
  
  <p>It still works as expected, but I'm still getting that Vue warn, however, if I'm following the method from here: <a href="https://stackoverflow.com/a/41901150/2012740">https://stackoverflow.com/a/41901150/2012740</a>, it stops working, but I'm getting no error.</p>
  
  <p>My Updated code: <a href="https://jsfiddle.net/angelin8r/647m7vdf/" rel="noreferrer">https://jsfiddle.net/angelin8r/647m7vdf/</a></p>
  
  <p>To conclude: I need the functionality from the beginning but without the <code>[Vue warn]</code></p>
  
  <p>This is what I got in my initial example:</p>
  
  <blockquote>
    <p>[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "birthYear" </p>
  </blockquote>