How can I refactor this checktree composable to be more performant

[VincEnterprise]

Currently I'm trying to make a Vue 3 composable for making a headless recursive checkbox tree view.
The checktree only selects leaf nodes, and the state of the internal nodes is always based on how many leaf nodes are selected.

https://stackblitz.com/edit/vitejs-vite-leu5hm?file=src%2FdataItems.ts,src%2FCheckTree.vue,src%2FCollapseItem.vue,src%2FuseCheckTree.ts,src%2FApp.vue

However the problem I'm running into is that performance when checking an item can be extremely slow, especially in dev mode (easily 3 seconds to select 1 checkbox). In the stackblitz example I added 100 rows each with about 35 sub rows of data. As you can see when the user checks a box, the entire transformed data is looped over again. This recursive loop itself is quite a heavy performance penalty as well as the subsequent rerenders for the component.

Is there a way to make this more efficient? I would really appreciate any input. 😇 🙏

[VincEnterprise]

bump, anyone?

[liulinboyi]

My suggest is you can refer to Naive UI's tree or element-plus's tree implementation.