Vue Js OTP Input

<!DOCTYPE html>
<html>
<head>
	<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
	<h3>VUe Js OTP Input</h3>
	<div id="app">
		<div class="otp-container">
			<input v-for="(value, index) in otpValues" :key="index" type="text" maxlength="1" class="otp-input"
				:value="value" @input="handleInput(index, $event.target.value)"
				@keydown.backspace="handleBackspace(index)" ref="otpFields" />
		</div>
	</div>
	<script type="module">
		const app = Vue.createApp({
			data() {
				return {
					otpValues: ['', '', '', ''],
				}
			},
			methods: {
				handleInput(index, value) {
					if (value.length > 1) {
						return;
					}
					this.otpValues[index] = value;
					if (value.length === 1 && index < this.otpValues.length - 1) {
						this.$refs.otpFields[index + 1].focus();
					}
				},
				handleBackspace(index) {
					if (this.otpValues[index] !== '') {
						this.otpValues[index] = '';
					} else if (index > 0) {
						this.$refs.otpFields[index - 1].focus();
					}
				},
			},
		});
		app.mount('#app');
	</script>
    <style scoped>
		.otp-container {
			display: flex;
			justify-content: center;
			align-items: center;
		}

.otp-input {
			width: 40px;
			height: 40px;
			text-align: center;
			font-size: 24px;
			margin: 0 10px;
			border: none;
			border-bottom: 2px solid #ccc;
			box-shadow: none;
			background-color: transparent;
			color: #333;
			transition: all 0.3s ease-in-out;
			font-family: Arial, Helvetica, sans-serif;
		}

.otp-input:focus {
			outline: none;
			border-bottom-color: #007bff;
		}
	</style>
</body>
</html>