Wrapping the component in a custom component. Emits "input" event?

[adavie1]

I want to embed this (great) component in another one- essentially adding a disabled function- so when disabled, displays the html content of the v-model bound property.

I'm using the custom component template as follows:

Usage Example:

...
   <my-component v-model="dataModel" :disabled="reasontoDisable" />
...

Custom Component Template: MyComponent.vue

<template>
    <div v-if="disabled">
      <p v-html="formData"></p>
    </div>
    <div v-else>
      <wysiwyg v-model="formData" @change="updated" />
    </div>
</template>

<script>

import SomeWrappedComponent from 'wherever'

export default {
  props: {
   value: {
    required: true
   },
   disabled: {
     type: Boolean,
     default: false
   }
  },

  methods: {
    updated (value) {
     this.$emit('input', value)
    }
  },

 data () {
  return { formData: this.value }
 }
}
</script>