Vue group an array of objects by key

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <h2>Vue Js group an array of objects by key</h2>
        <ul>
            <li v-for="(group, category) in groupedData" :key="category">
                <h3>{{ category }}</h3>
                <ul>
                    <li v-for="item in group" :key="item.id">{{ item.name }}</li>
                </ul>
            </li>
        </ul>
    </div>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    data: [
                        { id: 1, name: 'John', category: 'Developer' },
                        { id: 2, name: 'Jane', category: 'R & D' },
                        { id: 3, name: 'Bob', category: 'Developer' },
                        { id: 4, name: 'Alice', category: 'Marketing' },
                        { id: 5, name: 'Mike', category: 'SEO' },
                    ],
                    groupedData: {},
                };
            },
            mounted() {
                this.groupDataByCategory();
            },
            methods: {
                groupDataByCategory() {
                    this.groupedData = this.data.reduce((acc, cur) => {
                        const category = cur.category;
                        if (!acc[category]) {
                            acc[category] = [];
                        }
                        acc[category].push(cur);
                        return acc;
                    }, {});
                },
            },
        });
    </script>
</body>
</html>