How to extend a Vuetify component and keep the ref? - vue.js

Question

I'm currently using a v-textarea like this:
# Main.vue
v-textarea(ref="myTextArea")
I would like to put a transparent wrapper around it so I can use the same customized version throughout my app. I'm doing this:
# CustomTextarea.vue
<template>
<v-textarea v-bind="$attrs" v-on="$listeners"></v-textarea>
</template>
And I'm using it like this:
# Main.vue
CustomTextarea(ref="myTextArea")
The problem is that now my ref no longer points to the actual <textarea> (it points to the custom component) so something like this no longer works:
mounted() {
this.$nextTick(() => {
this.$refs.myTextarea.focus();
});
}
I don't understand the magic that Vuetify is using, but it does work in v-textarea. Is there a way to do the same in my customized component?

Answer 1

Okay, I think I found my answer here.
I just have to create the method and call it manually:
# CustomTextarea.vue
<template>
<v-textarea
v-bind="$attrs"
v-on="$listeners"
ref="input" //- <= add this
></v-textarea>
</template>
<script>
export default {
name: 'BaseTextarea',
methods: {
focus() {
this.$refs.input.focus(); //- <= call it here
},
},
};
</script>
I wonder if there is any way to automate this, but it works for now.