Get v-model value in child component Vue

Question

I am using a Vue2Editor in my Vuetify App. I have made a component of text-editor as:

<vue-editor
  :value="text"
  @input="updateText"
></vue-editor>

And it's props are:

props: {
  text: {
    type: String,
    required: true
  }
},

For the validation, I am calling it in the parent component and giving it v-model (VeeValidate requires it) :

<text-editor
  :text="UnitData.Details"
  v-model="UnitData.Details"
  @updateText="UnitData.Details = $event"
  data-vv-name="details"
  v-validate="'required|min:100'"
/>

Now look, text and v-model have same values, I need to get v-model in my child component (used vModel prop but not worked) , so that I don't end up with duplicate code, any suggestions?

Answer 1

text-editor component:

<vue-editor
  :value="value"
  @input="updateText"
></vue-editor>

props: {
  value: {
    type: String,
    required: true
  }
},
methods: {
  updateText () {
    this.$emit('input', this.value)
  }
}

parent

<text-editor
  v-model="UnitData.Details"
/>

See https://v2.vuejs.org/v2/guide/components.html#Using-v-model-on-Components