Javascript Alpine.js中的递归菜单

几个星期以来，我一直在琢磨如何实现这一点

我们的想法是，您单击“活动”或“工作”，它将显示该父项下的项目，然后如果您单击其中一个项目，它将显示该父项下的项目，依此类推

有什么想法我可以做到这一点吗？我提供了一个代码笔和下面的示例代码

    <ul>
        <template x-for="root in menu.main.filter(x => !x.parent)" :key="root.id">
            <li>
                <button x-text="root.title" x-on:click="$store.filters.activeIds = []; $store.filters.activeIds.push(root.id);"></button>
                <template x-if="$store.filters.activeIds.includes(root.id)">
                    <ul>
                        <template x-for="parent in menu.main.filter(x => $store.filters.activeIds.includes(x.parent))" :key="parent">
                            <li>
                                <button x-text="parent.title" x-on:click="$store.filters.activeIds.push(parent.id)"></button>
                                <template x-if="$store.filters.activeIds.includes(parent.id)">
                                    <ul>
                                        <template x-for="child in menu.main.filter(x => $store.filters.activeIds.includes(x.child))" :key="child">
                                            <li><button x-text="child.title" x-on:click="$store.filters.activeIds.push(child.id)"></button></li>
                                        </template>
                                    </ul>
                                </template>
                            </li>
                        </template>
                    </ul>
                </template>
            </li>
        </template>
    </ul>