如何在vue中对字母表中的字母进行分组并渲染为模板

computed: {
  groupedAlphabet() {
    const groups = {};
    this.alphabet.forEach(letter => {
      const groupKey = letter.charAt(0);
      if (!groups[groupKey]) {
        groups[groupKey] = [];
      }
      groups[groupKey].push(letter);
    });
    return groups;
  }
}

<template>
  <div>
    <div v-for="(group, key) in groupedAlphabet" :key="key">
      <h2>{{ key }}</h2>
      <ul>
        <li v-for="letter in group" :key="letter">{{ letter }}</li>
      </ul>
    </div>
  </div>
</template>