nuxt: Unhandled error during execution of scheduler flush related to NuxtPage, useAsyncData & refs

Environment

---

• Operating System: Linux
• Node Version: v18.12.1
• Nuxt Version: 3.6.1
• Nitro Version: 2.5.2
• Package Manager: yarn@1.22.19
• Builder: vite
• User Config: devtools
• Runtime Modules: -
• Build Modules: -

---

Reproduction

Reproduction : https://stackblitz.com/edit/github-88hbfa?file=pages%2Findex.vue

Steps to reproduce:

1. In a page file, retrieve data using useAsyncData and display an array of elements in the template using this data.
2. Assign the array of elements to a ref variable as described in the Vue.js documentation: https://vuejs.org/guide/essentials/template-refs.html#accessing-the-refs.
3. Display this page in a browser.
4. Edit the JS code of this page (e.g., modify console.log).
5. Errors will appear.

This error does not occur if:

• The page is being shown for the first time (no reloading through JS edits).
• The code specified above is inside app.vue and not inside a page that is loaded with NuxtPage (if you copy/paste index.vue inside app.vue, errors do not occur).
• No ref is used
• useAsyncData is not used

Describe the bug

Console error is shown related to scheduler flush. Also, TypeError: Cannot read properties of null (reading 'parentNode') error is thrown. See Logs field for more detials about these errors

Workarounds

• Reload page (meh)
• Use reactive instead of ref

<template>
<div>
  <li v-for="menuItem in menuItems" ref="(el) => updateMenuItemRefs(el)"></li>
</div>
</template>

<script setup>
[...]
const menuItemRefs = reactive([])
function updateMenuItemRefs (el) {
  menuItemRefs.push(el)
}
</script>

Additional context

No response

Logs

(initially made with test.vue page, but error is the same)

test.vue:14 edit this message 2

chunk-3Q27KRJ5.js:97 [Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/core 
  at <RouteProvider key="/test" routeProps= {Component: {…}, route: {…}} pageKey="/test"  ... > 
  at <RouterView name=undefined route=undefined > 
  at <NuxtPage> 
  at <NuxtLayout> 
  at <App key=3 > 
  at <NuxtRoot>
warn @ chunk-3Q27KRJ5.js:97
logError @ chunk-3Q27KRJ5.js:271
handleError @ chunk-3Q27KRJ5.js:263
callWithErrorHandling @ chunk-3Q27KRJ5.js:215
flushJobs @ chunk-3Q27KRJ5.js:411
Promise.then (async)
queueFlush @ chunk-3Q27KRJ5.js:324
queueJob @ chunk-3Q27KRJ5.js:318
reload @ chunk-3Q27KRJ5.js:517
(anonymous) @ chunk-3Q27KRJ5.js:547
(anonymous) @ test.vue?t=1688346524889:81
(anonymous) @ client.ts:542
(anonymous) @ client.ts:459
(anonymous) @ client.ts:306
queueUpdate @ client.ts:306
await in queueUpdate (async)
(anonymous) @ client.ts:159
handleMessage @ client.ts:157
(anonymous) @ client.ts:90
Show 7 more frames

chunk-MNWBZQKJ.js:82 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'parentNode')
    at parentNode (chunk-MNWBZQKJ.js:82:30)
    at ReactiveEffect.componentUpdateFn [as fn] (chunk-3Q27KRJ5.js:5823:11)
    at ReactiveEffect.run (reactivity.esm-bundler.js:178:19)
    at instance.update (chunk-3Q27KRJ5.js:5860:52)
    at callWithErrorHandling (chunk-3Q27KRJ5.js:213:32)
    at flushJobs (chunk-3Q27KRJ5.js:411:9)
parentNode @ chunk-MNWBZQKJ.js:82
componentUpdateFn @ chunk-3Q27KRJ5.js:5823
run @ reactivity.esm-bundler.js:178
instance.update @ chunk-3Q27KRJ5.js:5860
callWithErrorHandling @ chunk-3Q27KRJ5.js:213
flushJobs @ chunk-3Q27KRJ5.js:411
Promise.then (async)
queueFlush @ chunk-3Q27KRJ5.js:324
queueJob @ chunk-3Q27KRJ5.js:318
reload @ chunk-3Q27KRJ5.js:517
(anonymous) @ chunk-3Q27KRJ5.js:547
(anonymous) @ test.vue?t=1688346524889:81
(anonymous) @ client.ts:542
(anonymous) @ client.ts:459
(anonymous) @ client.ts:306
queueUpdate @ client.ts:306
await in queueUpdate (async)
(anonymous) @ client.ts:159
handleMessage @ client.ts:157
(anonymous) @ client.ts:90
Show 8 more frames