wysiwig editor can't handle :value

[Chris2011]

Context: I use this editor inside of a child component so I input my content from the parent. When I use v-model I got the error of vue, that I shouldn't update props directly. So I switched from v-model to :value.

Expected behaviour: It should show the content inside of the editor

What happens: Nothing is shown in the editor.

Code: Parent component:

<input-control :type="item.contentType" v-model="myValue" @update="touchForm" />

Child component:

<template>
    <fragment>
        <v-text-field v-if="type === 'simple" :value="value" @input="update" />
        <v-textarea v-if="type === 'multiline'" :value="value" :auto-grow="true" :rows="1" @input="update" />
        <wysiwyg v-if="type === 'richtext'" :value="value" @input="update" />
    </fragment>
</template>

<script lang="ts">
import Vue from 'vue';
import { Prop, Emit } from 'vue-property-decorator';
import { ContentType } from './ContentType';
import Component from 'vue-class-component';

@Component
export default class InputControl extends Vue {
    @Prop()
    public type: ContentType;

    @Prop()
    public value: string;

    @Emit('update')
    public update(val): string {
        return val;
    }
}
</script>

[Chris2011]

Maybe I missed smth and the solution is easy :)

[ChunAllen]

I managed to made this work using computed property with getter and setter

props: {
  value: { type: string }
},
computed: {
   val: {
      get() { return this.value },
      set(value) { this.$emit('input', value) }
   }
}

then I use the

  <wysiwyg v-model="val" />

if you other solution, please let me know :)