Listeners on custom components, such as @myEvent, listen for custom events emitted using this.$emit. In this case, @keyup is listening for the custom event this.$emit('keyup') (Note: This is not the native DOM keyup event.)
If your TextField component does not emit a keyup event, the listener will never be triggered. Even if a component inside it triggers an event with the same name, that event is only dispatched to its direct parent (i.e. the component using it).
To make the listener trigger, you need to emit the event while listening to it.
<TextField label="Some Text" @keyup="updateLen" v-model="text" />
<template>
<div>
<v-text-field @keyup="keyUp"></v-text-field>
</div>
</template>
<script>
keyUp(event) {
this.content = this.content.replace(/([^a-z0-9-]+)/gi, '');
this.$emit('input', this.content); // Updates `v-model`
this.$emit('keyup', event); // Triggers your `@keyup` listener
},
</script>
If your TextField component is simply a wrapper for v-text-field and you want it to have the same props / listeners, you can disable the automatic inheritance of attributes and set them yourself.
<template>
<div>
<v-text-field v-on="$listeners" v-bind="$attrs">
</div>
</template>
<script>
export default {
inheritAttrs: false, // The root element won't inherit all static attrs
}
</script>