How to pass v-model through component wrapper?

Question

JavaScript

Hello. In my project, I use Vuetify, for convenience, I wrap all form elements with my component. I am interested in such a moment as the easiest way to connect the v-model of the parent and child components. Right now I'm using this design

export default {
                template: '<v-text-field v-model="model"></v-text-field>',
                props: ['value'],
                data(){
                        return {
                                model: '',
                        }
                },

                created(){
                        this.model = this.value;
                },

                mounted() {
                        this.model = this.value;
                },
                watch: {
                        value(){
                                this.model = this.value;
                        },
                        model(){
                                this.$emit('input', this.model)
                        },
                }
        }

Tell me, can this be done even easier?

Answer 1

The documentation describes how to create such wrappers
https://v3.vuejs.org/guide/component-basics.html#u...