runtime-core.esm-bundler.js:40 [Vue warn]: Vue received a Component which was made a reactive object. This can lead to unnecessary performance overhead, and should be avoided by marking the component with markRaw or using shallowRef instead of ref.
该回答引用ChatGPT
这个警告是由于Vue3在接收到一个组件作为reactive对象时发出的。这会导致不必要的性能开销，并且应该通过使用markRaw标记组件或使用shallowRef代替ref来避免。
markRaw函数是Vue3提供的一个函数，用于将一个对象标记为“原始”对象，这意味着这个对象将被排除在reactivity系统之外，不会对其进行跟踪或代理。这可以防止不必要的组件更新。
另一种选择是使用shallowRef代替ref。与ref一样，shallowRef可以将对象转换为响应式引用，但它只跟踪对象的第一层，而不是整个对象树。这可以提高性能并避免不必要的更新。
为了解决这个警告，您可以尝试使用markRaw将组件标记为原始对象，或者使用shallowRef代替ref。如果您不需要这个组件具有响应式能力，也可以将其标记为markRaw对象。
可参考一下文章：
https://blog.csdn.net/weixin_44550490/article/details/126204088