title: Using sync modifier between Parent and Grandchildren Vue 2
body: <p><strong>Problem</strong></p>
  
  <p>Let's say I have a vue component called:</p>
  
  <p><em>Note: All vue components has been simplified to explain what I'm trying to do.</em></p>
  
  <p>reusable-comp.vue</p>
  
  <pre><code>&lt;template&gt;
      &lt;div class="input-group input-group-sm"&gt;
          &lt;input type="text" :value.number="setValue" class="form-control" @input="$emit('update:setValue', $event.target.value)"&gt;
          &lt;span&gt;
              &lt;button @click="incrementCounter()" :disabled="disabled" type="button" class="btn btn-outline-bordercolor btn-number" data-type="plus"&gt;
                  &lt;i class="fa fa-plus gray7"&gt;&lt;/i&gt;
              &lt;/button&gt;
          &lt;/span&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
      import 'font-awesome/css/font-awesome.css';
  
      export default {
          props: {
              setValue: {
                  type: Number,
                  required: false,
                  default: 0
              }
          },
          data() {
              return {
  
              }
          },
          methods: {
              incrementCounter: function () {
                  this.setValue += 1;
              }
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>Then in a parent component I do something like this:</p>
  
  <p>subform.vue</p>
  
  <pre><code>&lt;div class="row mb-1"&gt;
      &lt;div class="col-md-6"&gt;
          Increment Value of Num A
      &lt;/div&gt;
      &lt;div class="col-md-6"&gt;
          &lt;reuseable-comp :setValue.sync="numA"&gt;&lt;/reuseable-comp&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;script&gt;
      import reusableComp from '../reusable-comp'
      export default {
          components: {
              reusableComp 
          },
          props: {
              numA: {
                  type: Number,
                  required: false,
                  default: 0
          }
      },
      data() {
          return {
  
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>then lastly</p>
  
  <p>page_layout.vue</p>
  
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;subform :numA.sync="data1" /&gt;
     &lt;/div&gt;
   &lt;/template&gt;
   &lt;script&gt;
       import subform from '../subform.vue'
       export default {
           components: {
               subform
       },
       data() {
          return {
              data1: 0
          }
      }
   }
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>Question</strong></p>
  
  <p>So, how do I sync a value between reusable-comp.vue, subform.vue, and page_layout.vue</p>
  
  <p>I'm using reuseable-comp.vue is many different places. I'm using subform.vue only a couple times in page_layout.vue</p>
  
  <p>And I'm trying to use this pattern several times. But I can't seem to get this to work. The above gives me an error:</p>
  
  <blockquote>
    <p>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: "numA"</p>
  </blockquote>