Async components with lazy hydration break when interacted with very quickly after hydration

[niksy]

Vue version

3.5.17

Link to minimal reproduction

https://stackblitz.com/edit/vue-fast-hydration-error?file=src%2FApp.vue

Steps to reproduce

With errors

• Open project URL in browser
• Observe console errors

Without errors

• Open project URL in browser with ?lazy query parameter
• No console errors

What is expected?

UI shouldn’t break with lazy hydration on async components.

What is actually happening?

UI randomly breaks with lazy hydration on async components.

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 20.19.1 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.8.2 - /usr/local/bin/npm
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    vue: ^3.5.13 => 3.5.17

Any additional comments?

This issue creates minimum reproducible case for #12148.

I’ve managed to extract all necessary UI and functionality from actual production project to recreate issue.

As issue title states, async components with lazy hydration break when interacted with very quickly after hydration; in this case lazy loading data for async component.

If we add artificial timeout of e.g. 1000ms, error doesn’t occur.
Using smaller values creates unpredictable results. For example, 10ms will randomly fail in Chrome, but consistently in Safari.