Vue Js Input Mask for Date

<!DOCTYPE html>
<html>
<head>
	<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <h3>Vue Js Input Mask for Date</h3>
	<div id="app">
		<input type="text" v-model="date" @input="onDateInput" placeholder="dd/mm/yyyy" />
    </div>
	<script type="module">
		const app = Vue.createApp({
			data() {
				return {
					date: '',
				}
			},
           methods: {
				onDateInput(event) {
					// Remove non-numeric characters from the input
					const cleanedInput = event.target.value.replace(/\D/g, '');

// Format the input as a date (DD/MM/YYYY)
					if (cleanedInput.length <= 2) {
						this.date = cleanedInput;
					} else if (cleanedInput.length <= 4) {
						this.date = cleanedInput.slice(0, 2) + '/' + cleanedInput.slice(2);
					} else {
						this.date = cleanedInput.slice(0, 2) + '/' + cleanedInput.slice(2, 4) + '/' + cleanedInput.slice(4, 8);
					}
				},
			}

});
		app.mount('#app');
	</script>
	<style>
		input {
			font-size: 16px;
			border: none;
			border-bottom: 2px solid #ccc;
			padding: 0.5em 1em;
			flex-grow: 1;
			outline: none;
		}
	</style>
 </body>
</html>