title: How to set initial value for input Vue component using v-model
body: <p>I have the following component:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>Vue.component('email-input', {
    template: '#tmpl-email-input',
    name: 'email-input',
    delimiters: ['((', '))'],
  
    props: ['name', 'required', 'value'],
  
    data: () =&gt; ({
      suggestedEmail: '',
      email: '',
    }),
  
    methods: {
      onInput() {
        this.checkEmail();
        this.$emit('input', this.email);
      },
  
      checkEmail() {
        Mailcheck.run({
          email: this.email,
  
          suggested: suggestion =&gt; {
            this.suggestedEmail = suggestion.full;
          },
  
          empty: () =&gt; {
            this.suggestedEmail = '';
          },
        });
      },
  
      confirmSuggestion(confirm) {
        if (confirm) this.email = this.suggestedEmail;
        this.suggestedEmail = '';
      },
    },
  
    mounted() {
      this.checkEmail = _.debounce(this.checkEmail.bind(this), 1000);
    },
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p>using this template</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;template id="tmpl-email-input"&gt;
    &lt;div&gt;
      &lt;input
        type="email"
        class="form-control"
        :name="name || 'email'"
        :required="required"
        v-on:input="onInput"
        v-model="email"
      /&gt;
      &lt;small class="email-correction-suggestion" v-if="suggestedEmail"&gt;
        Did you mean ((suggestedEmail))?
        &lt;a href="#" class="btn-sm yes" @click.prevent="confirmSuggestion(true)"&gt;Yes&lt;/a&gt;
        &lt;a href="#" class="btn-sm no" @click.prevent="confirmSuggestion(false)"&gt;No&lt;/a&gt;
      &lt;/small&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;!-- Lodash from GitHub, using rawgit.com --&gt;
  &lt;script src="https://cdn.rawgit.com/lodash/lodash/4.17.4/dist/lodash.min.js"&gt;&lt;/script&gt;
  
  &lt;!-- Mailcheck: https://github.com/mailcheck/mailcheck --&gt;
  &lt;script src="/js/lib/mailcheck.js"&gt;&lt;/script&gt;
  
  &lt;script src="/js/views/partials/email_input.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>And I'm calling it using</p>
  
  <pre><code>&lt;email-input name="email" required&gt;&lt;/email-input&gt;
  </code></pre>
  
  <p>I'd like to set an initial value for this email input, something like</p>
  
  <pre><code>&lt;email-input name="email" required value="test@test.com"&gt;&lt;/email-input&gt;
  </code></pre>
  
  <p>and have that show in the input.</p>
  
  <p>I assumed I could do this by simply setting email to this.value in data but that doesn't help. How can I do this?</p>