vue3实现 多个input框输入 自动聚焦下一个

我最近要实现 车牌号输入框的功能，vant里有密码输入框，功能一样，但是vant只有数字键盘。不符合我的需求，所

<!-- 查询客户 -->
<template>
    <div class="page" v-show="data.show">
        <div class="licensePlate">
            <div class="input">
                <input type="text" class="inputValue" v-for="(item, index) in data.inputList" maxlength="1"
                    v-model="item.pinless" :key="index" @keydown="backClick" ref="inputList">
            </div>
        </div>

    </div>
</template>

<script>
import { looseIndexOf } from '@vue/shared'
import { onMounted, reactive, getCurrentInstance, watch, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
export default {
    setup() {

        let routr = useRouter()
        let route = useRoute()

        let data = reactive({
            // 输入框循环的数组
            inputList: [
                { pinless: "" },
                { pinless: "" },
                { pinless: "" },
                { pinless: "" },
                { pinless: "" },
                { pinless: "" },
                { pinless: "" },
                { pinless: "" },
            ],
        })

        let inputList = reactive({

        })

        // 获取inputDom元素
        let inputValue = getCurrentInstance()
        onMounted(() => {
            inputList = inputValue.refs.inputList
        })
        // 监视input框输入,自动聚焦下一个
        watch(data.inputList, (newValue) => {
            for (let inx = 0; inx < newValue.length; inx++) {
                if (newValue[inx].pinless != '') {
                    if (inx === 7) {
                        for (let index = 0; index < newValue.length; index++) {  // 用户从中间开始输入情况处理
                            if (newValue[index].pinless === '') {
                                inputList[index].focus()
                                return
                            }
                        }
                    } else {
                        inputList[inx + 1].focus()
                    }
                }
            }
        })
        // input框删除事件
        const backClick = ((val) => {
            if (val.keyCode === 8) {
                setTimeout(() => {
                    for (let index = 0; index < data.inputList.length; index++) {
                        if (data.inputList[index].pinless === '') {
                            if (index === 0) {
                                for (let i = 0; i < data.inputList.length; i++) { // 用户从中间删除情况处理
                                    if (data.inputList[i].pinless != '') {
                                        inputList[i].focus()
                                    }
                                }
                                return
                            } else {
                                inputList[index - 1].focus() // 删除上一个input聚焦
                                return
                            }
                        }
                    }
                })
            }
        })


        return {
            data,
            backClick,
        }
    }
}
</script>

<style scoped lang="scss">
.page {
    width: 6.86rem;
    margin: 0 auto;

    .licensePlate {
        
        .input {
            margin-top: 0.24rem;
            display: flex;
            justify-content: space-between;

            .inputValue {
                outline: none;
                padding: 0;
                width: 0.5rem;
                height: 1rem;
                border: 0.016rem solid #CCCCCC;
                border-radius: 0.16rem;
                align-items: center;
                justify-content: space-evenly;
                padding-left: 0.3rem;
            }

          
        }
    }

   
}

</style>

以手搓了一个。其中考虑到，中间输入、中间删除的情况