[useEventSource]: Hot Reload - Maximum recursive updates exceeded

[Jake Tigchelaar]

Describe the bug

Hot Reload with Nuxt 3 seems to be causing an infinte render loop with useEventSource.
See reproduction.

Uncaught (in promise) Maximum recursive updates exceeded in component <nuxt-root>. This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself. Possible sources include component template, render function, updated hook or watcher source function.

Reproduction

https://stackblitz.com/edit/nuxt-starter-vn3hms?file=app.vue

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (8) x64 Intel(R) Core(TM) i5-8265U CPU @ 1.60GHz
    Memory: 673.77 MB / 15.75 GB
  Binaries:
    Node: 20.11.0 - C:\Program Files\nodejs\node.EXE     
    npm: 10.2.4 - C:\Program Files\nodejs\npm.CMD        
    pnpm: 8.15.1 - C:\ProgramData\chocolatey\bin\pnpm.EXE
  Browsers:
    Edge: Chromium (123.0.2420.97)
  npmPackages:
    @vueuse/components: ^10.9.0 => 10.9.0 
    @vueuse/math: ^10.9.0 => 10.9.0 
    @vueuse/nuxt: ^10.9.0 => 10.9.0

Used Package Manager

npm

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a VueUse issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion.
• The provided reproduction is a minimal reproducible example of the bug.