Poor component nesting or something missing for v-model to work properly?

Question

Vue.js

Hello, I will describe the structure so that the question is clear.
There is a component with a form for adding categories <form-category>,
it contains a component <quill-editor>with settings for a text editor,
and in <quill-editor>the text editor itself, a component <quill>.
In a component , the <form-category>component <quill-editor>is called like this:

<quill-editor ref="quillEditor" v-model="category.text"></quill-editor>

And in itself <quill-editor>, here is the code for what v-model would work:

<template>
    <quill v-model="content" :options="editorOption" @change="textChange"></quill>
</template>

<script>
    export default {
        model: {
            prop: 'text',
            event: 'quill-change',
        },
        props: {
            text: {},
        },
        data: function() {
            return {
                content: '',
                editorOption: {
                    placeholder: 'Описание категории...',
                    formats: [],
                    modules: {
                        toolbar: [
                            ['bold', 'italic', 'underline', 'strike'],
                            [{ 'list': 'ordered' }, { 'list': 'bullet' }],
                            ['link']
                        ]
                    }
                }
            }
        },
        components: {
            'quill': () => import(/* webpackChunkName: "/quill-editor" */ 'vue-quill-editor/src/editor')
        },
        methods: {
            textChange: function() {
                this.$emit('quill-change', this.content);
            },
            clearEditor: function() {
                this.content = '';
            }
        }
    }
</script>

And I have such a problem: if <form-category>I change the value in category.text, it changes, and the input parameter in <quill-editor>- also changes text, but the <quill>value does not reach the component, namely, the parameter contentin the component <quill-editor>. Please tell me what can be done here, or maybe it's better to change the structure of the components not to do such nesting. Thank you in advance for your response.

Answer 1

We need to forward the input event up the component chain, see what v-model actually is in the documentation: https://ru.vuejs.org/v2/guide/components.html#%D0%...

<template>
    <quill :value="content" @input="value => $emit('input', value)"></quill>
</template>

Answer 2

Hmm, where do you have a connection between the text and content parameter? They don't get connected.