I can't find what I'm looking for: integrations/vue.md

[LimaniAlbin]

Hello,
I am using a TinyMCE editor in my vue application. I want to make that editor a reusable component.

{{ label }}

    <Editor
        api-key="my-api-key"
        :init="{
                toolbar_mode: 'sliding',
                plugins: 'tinycomments mentions anchor autolink charmap codesample emoticons image link lists media searchreplace table visualblocks wordcount checklist mediaembed casechange export formatpainter pageembed permanentpen advtable advcode powerpaste tinymcespellchecker a11ychecker ',
                toolbar: 'undo redo | blocks fontfamily fontsize | bold italic underline strikethrough | link image media table mergetags | align lineheight | tinycomments | checklist numlist bullist indent outdent | emoticons charmap | removeformat',
                tinycomments_mode: 'embedded',
                tinycomments_author: 'Author name',
            }"
        v-model="text"
        @selectionChange="onInput($event)"
        style="height: 500px"
        :class="{ 'is-invalid': errors?.length > 0, 'is-valid': !invalid }"
    />
    <p>{{ text }}</p>
    <div v-if="showErrors" class="error-wrapper">
        <div v-for="error of errors" :key="error.$uid" class="input-errors">
            <div class="text-danger"> {{ error.$message }}</div>
        </div>
    </div>
</div>

<script setup> // import Editor from 'primevue/editor' import Editor from '@tinymce/tinymce-vue' import {defineEmits, defineProps, ref} from 'vue' const props = defineProps({ modelValue: {type: String, default: ''}, label: {type: String, default: ''}, errors: {type: Array, default: () => []}, invalid: {type: Boolean, default: false}, showErrors: {type: Boolean, default: true} }) let text text = props.modelValue const emit = defineEmits(['keyUp']) const onInput = (evt) => { emit('keyUp', evt.target) } </script>

This is my current component. Now when i use it inside another component like this:

The content of the editor remains null. Even though i write on it and i can see the changes it still doesnt register the content i write.
The confusing thing is that if I use it directly in the component like this:
<Editor
api-key="a798nd2rw8a63u5nwlsuanf9szb9bq2yz0h3svi8v64yc5oc"
:init="{
toolbar_mode: 'sliding',
plugins: 'tinycomments mentions anchor autolink charmap codesample emoticons image link lists media searchreplace table visualblocks wordcount checklist mediaembed casechange export formatpainter pageembed permanentpen advtable advcode powerpaste tinymcespellchecker a11ychecker ',
toolbar: 'undo redo | blocks fontfamily fontsize | bold italic underline strikethrough | link image media table mergetags | align lineheight | tinycomments | checklist numlist bullist indent outdent | emoticons charmap | removeformat',
tinycomments_mode: 'embedded',
tinycomments_author: 'Author name',
}"
v-model="collectionData.description"
@selectionChange="onInput($event)"
style="height: 500px"
id="description"
/>
It works flawlessly. The problems arise when i make it a reusable component.