vue3 点击字母 滚动到对应城市首字母

这里只放核心代码，用原生Js实现，其它的看了都太花俏，难用

citys 放的是所有城市数据  太长了，这里随便放几个

<template>

// 左边滚动区域
    <div class="listtest"  id="mTab">

        <div class="area" v-for="(item, key) of citys" :key="key"  :id="key" style="height: 100px;">
            <div class="title border-topbottom">{{ key }}</div>
        </div>
    </div>
// 右边字母点击
    <div class="letter">
        <div class="item" v-for="item of letters" :key="item" @click="handleLetterClick">
            {{ item }}
        </div>
    </div>
</template>
<script setup>
const citys = {
    "A": [{
        "id": 56,
        "spell": "aba",
        "name": "阿坝"
    }],
    "B": [{
        "id": 1,
        "spell": "beijing",
        "name": "北京"
    },],
    "C": [{
        "id": 2,
        "spell": "chongqing",
        "name": "重庆"
    }],
    "D": [{
        "id": 9,
        "spell": "dalian",
        "name": "大连"
    }],
    "E": [{
        "id": 111,
        "spell": "eerduosi",
        "name": "鄂尔多斯"
    }],
    "F": [{
        "id": 11,
        "spell": "foshan",
        "name": "佛山"
    }],
    "G": [{
        "id": 13,
        "spell": "guangzhou",
        "name": "广州"
    }],
    "H": [{
        "id": 15,
        "spell": "haerbin",
        "name": "哈尔滨"
    }],
}
let letters = computed(() => Object.keys(citys))



const handleLetterClick = (e) => {
    e.stopPropagation();
    document.getElementById('mTab').scrollTo({ top: document.getElementById(e.target.innerText).offsetTop - 100, behavior: 'smooth' });
}
</script>
<style lang="less" scoped>
.listtest {
    height: 400px;
    width: 440px;
    overflow-y: scroll;
}

.letter {
    position: absolute;
    background-color: red;
    top: 0;
    z-index: 999;
    right: 40px;
}
</style>