Objects in props or reactive state treated as Unknown Component if they contain a `render: Function` property

[rydash]

Version

6.2.1

Browser and OS info

Chrome 105.0.5195.127 / Windows 10 21H2

Steps to reproduce

1. Create a simple Vue project with create-vite or another mechanism you prefer.
2. Create a Vue component so that its props, data, or reactive state contains at least one object where at least one key is named render and its value is a Function with any body. An example with the composition API: const renderObj = ref({ render: () => { } })
3. Launch the webpage containing your Vue component and open the Vue DevTools.
4. Find your component and its properties in the Inspector view.
5. Notice the object you defined shows a value of "Unknown Component" even though its real value is not a component at all.

What is expected?

Vue DevTools accurately identifies when a Vue component has been passed as props or defined in a component's reactive state.

What is actually happening?

Vue DevTools assume that a render: Function value within an object in a component's props or reactive state means that entire object is an unknown or unregistered Vue component.

---

This happens with both the Composition API and the Legacy API with Vue 3.

I understand how the current ducktyping attempts to identify Vue components, because all components would have that render function! But I wonder if there's a way to make the ducktyping more precise. I encountered this while adding a KontraJS Sprite as component data, which under the covers is an object containing a render function... so the Vue DevTools were unable to show me any other information about that Sprite unless I, like, console.log'd it. Not great!