Vue Js Move to Next Input Automatically

<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <h3>Vue Js Move to Next Input Automatically</h3>
        <input type="text" v-model="input1" @input="moveToNext($event, 'input2')" maxlength="2" />
        <input type="text" ref="input2" v-model="input2" @input="moveToNext($event, 'input3')" maxlength="2" />
        <input type="text" ref="input3" v-model="input3" maxlength="2" />
    </div>
    <script type="module">
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    input1: '',
                    input2: '',
                    input3: ''
                }
            },
            methods: {
                moveToNext(event, nextInputRef) {
                    if (event.target.value.length === event.target.maxLength) {
                        this.$refs[nextInputRef].focus();
                    }
                }
            }
        });

</script>
    <style scoped>
        #app {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            font-family: sans-serif;
        }

input[type="text"] {
            margin: 10px;
            padding: 5px;
            font-size: 1rem;
            border: 1px solid #ccc;
            border-radius: 3px;
        }

input[type="text"]:focus {
            outline: none;
            border-color: blue;
        }

button {
            margin: 10px;
            padding: 5px 10px;
            font-size: 1rem;
            background-color: #0074D9;
            color: #fff;
            border: none;
            border-radius: 3px;
            cursor: pointer;
        }

button:disabled {
            background-color: #ccc;
            cursor: not-allowed;
        }
    </style>
</body>

</html>