fix(devtools): allow devtools to identify parent components of hydrated elements.

[LinusBorg]

See: vuejs/devtools#2004

This PR replicates the following code, which runs for devtools during mountElement(), so that it also runs during hydrateElement()

core/packages/runtime-core/src/renderer.ts

Lines 685 to 694 in bef85e7

	if (__DEV__ || __FEATURE_PROD_DEVTOOLS__) {
	Object.defineProperty(el, '__vnode', {
	value: vnode,
	enumerable: false
	})
	Object.defineProperty(el, '__vueParentComponent', {
	value: parentComponent,
	enumerable: false
	})
	}

[niksy]

Any updates on this? What can we do to get this merged? In the meantime, for those looking for a quick fix, use https://github.com/ds300/patch-package and patch local version of Vue.

[TechAkayy]

Would be good to have this merged in please, as devtools is still having the issue. Thanks in advance!

[TechAkayy]

@LinusBorg, request you to kindly merge this fix, it has been pending for a long time.

This issue does confuse users when using devtools (incl the new nuxt-devtools) until they reach the relevant issue on vue-devtools repo, and here.

Thank you!

[skirtles-code]

I'm wondering whether this is still an issue since #9328 was merged? The fixes look very similar.

[niksy]

Applying these changes to latest Vue (3.4.21) results in following error:

Uncaught (in promise) TypeError: Cannot redefine property: __vnode

It seems like dev tools select works on initial load, but when your refresh the page with dev tools open and Vue tab selected, it stops working. Solution is to close dev tools and reopen.

So I guess this sort of works?

[yyx990803]

Closing as duplicate of #9328