TextInput component for Vue3 (Reactive v-model)

TextInput.vue

<template>
	<div class="form-control">
		<label class="label">
			<span class="label-text">{{ labelName }}</span>
		</label>
		<input
			type="text"
			class="input input-bordered"
			:value="tv"
			@input="updateModelValue"
			@focus="focus"
			@blur="blur"
		>
		<span>{{ errorMessage }}</span>
	</div>
</template>
<script setup>
	import {ref, defineProps, defineEmits} from "vue"
	const emit = defineEmits([
		"update:modelValue",
		"focus",
		"blur",
	])

	const tv = ref("")

	defineProps({
		labelName: {
			type: String,
			default: ""
		},
		errorMessage: {
			type: String,
			default: ""
		}
	})
	const updateModelValue = ($event) => {
		tv.value = $event.target.value
		emit("update:modelValue", $event.target.value)
	}
</script>