title: Update parent model from child component Vue
body: <p>I have a very small app that has a donation form. The form walks the user through the steps of filling in information. I have a main component, which is the form wrapper and the main Vue instance which holds all of the form data (model). All of the child components are steps within the donation process. Each child component has input fields that are to be filled out and those field will update the parent model so that I have all of the form data in the parent model when I submit the form. Here is how the components are put together:</p>
  
  <pre><code>&lt;donation-form&gt;&lt;/donation-form&gt; // Main/Parent component
  </code></pre>
  
  <p>Inside the  <code>donation-form</code> component:</p>
  
  <pre><code>&lt;template&gt;
      &lt;form action="/" id="give"&gt;
          &lt;div id="inner-form-wrapper" :class="sliderClass"&gt;
              &lt;step1&gt;&lt;/step1&gt;
              &lt;step2&gt;&lt;/step2&gt;
              &lt;step3&gt;&lt;/step3&gt;
          &lt;/div&gt;
          &lt;nav-buttons&gt;&lt;/nav-buttons&gt;
      &lt;/form&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>Right now, I am setting the data from the inputs in each child component and then I have a <code>watch</code> method that is watching for fields to update and then I am pushing them to the <code>$root</code> by doing this...</p>
  
  <pre><code>watch: {
      amount() {
          this.$root.donation.amount = this.amount;
      }
  }
  </code></pre>
  
  <p>The problem is that one of my steps I have a lot of fields and I seem to be writing some repetitive code. Also, I'm sure this is not the best way to do this. </p>
  
  <p>I tried passing the data as a <code>prop</code> to my child components but it seems that I cannot change the props in my child component.</p>
  
  <p>What would be a better way to update the root instance, or even a parent instance besides add a watch to every value in my child components? </p>
  
  <p><strong>More examples</strong>
  Here is my <code>step2.vue</code> file - <a href="https://gist.github.com/dericcain/2317669b580cc254638bcd766f8f691f" rel="noreferrer">step2 vue file</a>
  Here is my <code>donation-form.vue</code> file - <a href="https://gist.github.com/dericcain/901c39c07963d4901122f748dd12959c" rel="noreferrer">donation-form vue file</a></p>