title: Passing default data to Vue form component
body: <p>Here is a simple Vue 2.0 form component. It consists of a number input and a button, e.g.:</p>
  
  <p><a href="https://i.stack.imgur.com/SaruX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SaruX.png" alt="enter image description here"></a></p>
  
  <p>Note that the value of the input is tied to the component's <code>data</code> using <code>v-model</code>. <code>buttonText</code> is passed in as a prop.</p>
  
  <p><strong>What's the best way to pass a default value into the form</strong>, so that it initially renders with a value other than 10?</p>
  
  <ul>
  <li>Using <code>props</code> doesn't seem to be the right way to do it because then <code>v-model</code> no longer works properly.</li>
  <li>However, <code>data</code> can't be passed in the way props can, as far as I can tell from Vue documentation.</li>
  </ul>
  
  <p>.</p>
  
  <pre><code>&lt;template&gt;
      &lt;form v-on:submit.prevent="onSubmit"&gt;
        &lt;input v-model="amount" type="number" min="1" max="20"&gt;&lt;/input&gt;
        &lt;button type="submit"&gt;{{ buttonText }}&lt;/button&gt;
      &lt;/form&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
    export default {
      props: [ 'buttonText' ],
      data: function() {
        return {
          amount: 10
        }
      },
      methods: {
        onSubmit: function() {
          this.$emit("submit", parseInt(this.amount) );
        }
      }
    }
  &lt;/script&gt;
  </code></pre>