Binding a CSS variable in a component that uses a Ref on a loop of a custom component breaks Hot Module Reload

[noahgregory-basis]

Vue version

3.3.8

Link to minimal reproduction

https://github.com/noahgregory-basis/nuxt-test

Steps to reproduce

1. Run npm run dev to start the dev server.
2. Open browser to dev server and open the developer console.
3. Comment out the console.log line in Bar.vue and save to trigger hot module reload.
4. Observe the error:
   Uncaught (in promise) TypeError: Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'.

This appears to happen in the useCssVars helper function. Specifically inside the onMounted callback, at the line (as seen below in the bundle):

    ob.observe(instance.subTree.el.parentNode, { childList: true });

What is expected?

No error occurs when hot-reloading.

What is actually happening?

Error occurs when hot-reloading.

System Info

No response

Any additional comments?

I have found that two circumstances need to exist for this error to appear:

1. For some custom component:
   a. The component is given a v-for prop to render it multiple times,
   b. The component is given a ref prop to put the array of components in, and
   c. The name passed into ref is defined as a ref in <script setup> block; and
2. A variable is defined in the <script setup> block and is used in v-bind in the <style> block.

Given where the error occurs, it seems item 2 is more of a culprit than item 1. However, item 1 still needs to exist, so it must be at least somewhat at fault. How, though, I have no idea.

[Disservin]

Probably a duplicate of #9264

[Formulaaa]

I hava the same problem.The parentNode is "null" causes this problem. But when I use MutationObserver to monitor the parentNode, I find it has never been modified.