Upgrading to 3.4 breaks ref behaviour in highcharts-vue

[Kjir]

Vue version

3.4.5

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-k8kyr7?file=src%2FApp.vue

Steps to reproduce

1. Launch the app and open the devtools
2. The error will be visible in the console
3. Downgrade to Vue 3.3 to confirm the code works there

What is expected?

The graph should be displayed

What is actually happening?

The app throws errors and warnings:

 [Vue warn]: Missing ref owner context. ref cannot be used on hoisted vnodes. A vnode with ref must be created inside the render function.

[Vue warn]: Unhandled error during execution of mounted hook

Uncaught TypeError: can't access property "nodeName", t3 is null

System Info

No response

Any additional comments?

In Vue 3.4, the ref here is in its initial state (null) and does not contain a ref to the container: https://github.com/highcharts/highcharts-vue/blob/master/src/component.js#L80

In Vue 3.3 the ref correctly points to the <div>. When trying with a production build, the app still doesn't work, but a log there will eventually show the ref pointing to a <div>. This means somehow the order of execution of things has changed between the call to render() and the call to the onMounted() callback.

Also reported on the highchart-vue repository: highcharts/highcharts-vue#256

[Shyam-Chen]

Downgrading to v3.4.4 works fine.

[sporritt]

This was reported by a jsPlumb Toolkit licensee also, in relation to one of our demonstration apps:

<jsplumb-toolkit ref="toolkitComponent"
                             surface-id="surfaceId"
                             :render-params="this.renderParams()"
                             :view="this.viewParams()"
                             :toolkit-params="this.toolkitParams()"
                             url="copyright.json">
            </jsplumb-toolkit>

The ref here causes the error "Missing ref owner context. ref cannot be used on hoisted vnodes. A vnode with ref must be created inside the render function" to be logged.

https://github.com/jsplumb/jsplumbtoolkit-applications/blob/main/apps/flowchart-builder/vue3/src/components/Flowchart.vue#L246