Vue js focus next Input on enter

<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <h3>Vue Js Focus Next Input on Enter</h3>
        <input v-for="(input, index) in inputs" :key="index" ref="inputRefs" :tabindex="index + 1"
            @keydown.enter.prevent="focusNextInput(index)">
    </div>
    <script type="module">
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    inputs: [
                        { value: '' },
                        { value: '' },
                        { value: '' }
                    ]
                }
            },
            methods: {
                focusNextInput(index) {
                    if (index < this.inputs.length - 1) {
                        this.$refs.inputRefs[index + 1].focus();
                    } else {
                        this.$refs.inputRefs[0].focus();
                    }
                }
            }
        });

</script>
    <style scoped>
        #app {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

#app h3 {
            margin-bottom: 20px;
        }

#app input {
            margin-bottom: 10px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            font-size: 16px;
        }

#app input:focus {
            outline: none;
            border-color: #007bff;
        }
    </style>
</body>

</html>