下面我们将使用一个computed属性来确保它按字母顺序排序，然后呈现你的第一个字符。虽然你应该使用grouping imo。

<template>
    <ul>
        <div v-for="(list, index) in sortedlist" :key="`people_${index}`">
           <div v-if="!isFirstCharSame(list.label)" >{{ firstChar }} </div>
            <li>
              <span>{{ list.label }}</span>
            </li> 
         </div> 
    </ul> 
</template>
<script>
export default {
    data() {
      return {
        itemlist: [
            {"label":"Alpha"},
            {"label":"Beta"},
            {"label":"Charlie"},
            {"label":"Delta"},
        ],
        firstChar: '',
      };
    },
    methods: {
        isFirstCharSame(char) {
            if (str.startsWith(this.firstChar)) {
                return true;
            }
            this.firstChar = str.charAt(0);
            return false;
        },
    },
    computed: {
        sortedList() {
            return this.itemList.sort((a, b) => {
                if (a.label > b.label) {
                    return 1;
                }
                if (b.label > a.label) {
                    return -1;
                }
                return 0;
            });
        },
    },
};
</script>

是的，你可以随时更新你的数据，组件会重新渲染来反映它。

您可以在组件中的方法或计算属性等内部声明变量，但它们不能从模板或代码的其余部分访问，也不是被动的。
要使它们成为React式的，并且可以从更高的作用域访问它们，唯一的方法是通过以下方式将data属性添加到组件中：

data: function () {
    return {
      foo: 'bar'    
    }
  },

或

data () {
    return {
      foo: 'bar'    
    }
  },

除此之外，错误的原因是你在渲染中改变了变量的状态。当这种情况发生时，Vue会重新渲染模板，因为值已经改变，并再次调用函数，* 瞧 *：这就是一个无限循环。
您可能应该检查正在调用的函数，并尝试将data属性中的变量替换为从实际data变量获取数据的局部变量。