title: Vuejs Bind value to v-model from prop or computed value
body: <p>I have an input that is a component and rendered in the master view as so:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;slug v-model="slug"&gt;&lt;/slug&gt;
  </code></pre>
  
  <p>Then I have a component view such as below:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;v-text-field box label="Slug*" v-model="slug" @change="strtoslug"  :rules="requiredRule"&gt;&lt;/v-text-field&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>I am running a computed method to get and set the data and can <code>console.log</code> with no issues. In the editing state, I can't populate <code>v-model</code> with an updated computed state, as I cant declare as a data source upon render.</p>
  
  <p>Here is my whole code block:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;v-text-field box label="Slug*" v-model="slug" @change="strtoslug"  :rules="requiredRule"&gt;&lt;/v-text-field&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  //Set the params
  export default {
    name:'slug',
    props: ['value'],
    //Set the data
    data() {
        const self = this;
        return {
            slugstr: '',
            requiredRule: [
                (v) =&gt; !!v || 'Field is required',
            ],
          }
      },
      watch: {
      },
      //Get the value onchange computer to return from component
      computed: {
          slug: {
            get() {
                return this.value;
            },
            set(val) {
              //set the slug
              this.slugstr = val;
              this.slug    = val;
              //send data back to parent
              this.$emit('input',val)
               return this.value;
            }
          }
      },
      mounted() {
        const self = this;
        //Set the templates get request
       },
        methods: {
          strtoslug: function(value){
              this.slug = this.sanitizeSlug(value);
          },
  
          sanitizeSlug: function(title) {
           var slug = "";
           // Change to lower case
           var titleLower = title.toLowerCase();
           // Letter "e"
           slug = titleLower.replace(/e|é|è|ẽ|ẻ|ẹ|ê|ế|ề|ễ|ể|ệ/gi, 'e');
           // Letter "a"
           slug = slug.replace(/a|á|à|ã|ả|ạ|ă|ắ|ằ|ẵ|ẳ|ặ|â|ấ|ầ|ẫ|ẩ|ậ/gi, 'a');
           // Letter "o"
           slug = slug.replace(/o|ó|ò|õ|ỏ|ọ|ô|ố|ồ|ỗ|ổ|ộ|ơ|ớ|ờ|ỡ|ở|ợ/gi, 'o');
           // Letter "u"
           slug = slug.replace(/u|ú|ù|ũ|ủ|ụ|ư|ứ|ừ|ữ|ử|ự/gi, 'u');
           // Letter "d"
           slug = slug.replace(/đ/gi, 'd');
           // Trim the last whitespace
           slug = slug.replace(/\s*$/g, '');
           // Remove Punctuation
           slug = slug.replace(/[.,\/#!$%\^&amp;\*;:{}=\`~()]/g,"");
           // Change whitespace to "-"
           slug = slug.replace(/\s+/g, '-');
       //Return the formatted str
       return slug;
     }
   }
  
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>The <code>onchange</code> happens in the <code>console.log</code>, but I just cannot get it to render inside the <code>input</code> as a value. What am I doing wrong?</p>