组件持久化的问题请教

有一个需求，高了快 2 天，没搞定，请教下达人。

需求：
const data=ref({
id:xxx,ref:关联某个组件，children:[
id:xxx,ref:关联某个组件，children:[]
id:xxx,ref:关联某个组件，children:[]
]
})

------------
尝试 1: 动态渲染：
<KeepAlive>
<component :is="某 item.ref" />
</KeepAlive>

尝试 2：全局注册一个组件池，存储先实例化的组件，然后通过索引方式来挂载
<KeepAlive>
<DirectiveWrapper
:component-id="某 item.componentId"
:compOnent="getComponentById(某 item.componentId)"
/>
</KeepAlive>



问题：
当 ref 可以在 data 里的子父节点交换时，组件会被重新渲染初始化，丢失了状态。 使用过，因为没有共享数据的需求，也尝试过直接存组件状态的，但该丢失还是丢失。


需要大家给点思路方向，需要解决指定组件不被重新渲染。