title: Custom Vue Input Component not Displaying Bound Value
body: <p>I've created a vue component to reuse thoughout my app but I'm struggling with one aspect the value being initially displayed in the input text field. It feels like there is something I'm misunderstanding about the the render cycle and how value binding works.</p>
  <p>Here is the Vue component that I've made:</p>
  <pre><code>&lt;template&gt;
    &lt;div class=&quot;my-2&quot;&gt;
      &lt;label for=&quot;name&quot;&gt;{{ label }} &lt;/label&gt;
      &lt;input
        :id=&quot;id&quot;
        :name=&quot;name&quot;
        :class=&quot;{
          input: true,
          'input-error': errorMessage &amp;&amp; errorMessage != '',
        }&quot;
        :value=&quot;value&quot;
        v-on:input=&quot;action&quot;
        :type=&quot;type&quot;
        :required=&quot;!!required&quot;
        v-once
      /&gt;
      &lt;p v-show=&quot;errorMessage &amp;&amp; errorMessage != ''&quot; class=&quot;error-message&quot;&gt;
        {{ errorMessage }}
      &lt;/p&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    name: &quot;BaseInput&quot;,
    props: [
      &quot;defaultValue&quot;,
      &quot;label&quot;,
      &quot;type&quot;,
      &quot;id&quot;,
      &quot;name&quot;,
      &quot;errorMessage&quot;,
      &quot;required&quot;,
    ],
    computed: { 
      value() {
        console.log(this.defaultValue);
        return this.defaultValue
      },
    },
    methods: {
      action(e) {
        this.$emit(&quot;input&quot;, e.target.value);
      },
    },
  };
  &lt;/script&gt;
  </code></pre>
  <p>and I reference it in my parent component as such:</p>
  <pre><code>&lt;base-input label=&quot;Base Input 2&quot; id=&quot;in2&quot; name=&quot;name&quot; v-model=&quot;value&quot;&gt;&lt;/base-input&gt; {{value}}
  </code></pre>
  <p>when the page loads the  <code>{{value}}</code> displays value as expected, but the input does not actually display the text</p>