vue3: 请教下 nested json config 怎么制作 reactive 前端 UI 呢？

用的工具是 element plus 作为前端 UI 库，pinia 作为 store 。

如果是简单的一对一的 form ，用 vue 写起来很简单。但是遇到 nested 的 config 就力不从心了。请注意，这个 nested 是 dynamic 的，本质上属于一个 tree 。

举一个例子，就是男女相亲大聚会，参与者可以选择 A 类型桌："男 A 女免"，B 类型桌："女 A 男免"，C 类型桌："所有人 AA"。当然了，每种类型的桌意味着不同的游戏和酒水，也是各自 config 的一部分。除此之外，这些桌可以选择不同的包间，比如两张 A 桌共享包间 888 ， 一张 A 桌一张 B 桌共享包间 666 。因为是 nested ，我们还要允许小包间里再加小包间。

我最后要作为经理去计算每个人的收费。比如总花费 10000 元，我要按照比例计算每个人的收费。

聚会 10000
/ ｜ \
包间 666(20%) 包间 888(20%) 包间 618(60%)
｜ ｜ / \
A 桌(大壮，小红...) B 桌（杰克，肉丝...） 包间 618-1(60%) 包间 618-2(40%)
/ \ / \
A B B B


我目前的方案没有用到 store ，直接是 v-model 然后通过 props 和 emit 来传递，但是层层传递显得非常复杂，而且我在各种 A 桌模块，B 桌模块，包间模块里写了一些逻辑来初始化 UI ，散乱不好打理。从头开始创建 config 很简单，但是我现在如果保存了 config ，再载入，我不确定是否能完美复现 UI 。

所以现在想要用 store 来作为数据中心，写个 class 来处理逻辑操作，而 vue 文件就管显示和与 store 的数据交互。一个 config json 确定一个 UI state 。

但是层层叠叠的数据，想要 reactive 挺难的，现在想着 flatten 成键值对，然后通过逻辑代码来操作真正的数据。但是怎么想都想不通。


后端写前端，说多了都是泪，有没有大侠帮忙看看？谢谢了