SSR Hydration mismatch with HeadlessUI starting in 3.4.x

[drewtownchi]

Vue version

3.4.5

Link to minimal reproduction

https://github.com/drewtownchi/ssr-hydration-issue

Steps to reproduce

Run the project and look at the console. I originally found this when working in an Astro project but recreated it in a standalone Vite SSR template as a minimal repro.

What is expected?

No hydration issue

What is actually happening?

The rendered id for the disclosure button is increasing by 2 every time but the expected always stays at 1

System Info

System:
    OS: Windows 11 10.0.22621
    CPU: (12) x64 AMD Ryzen 5 2600 Six-Core Processor
    Memory: 16.18 GB / 31.95 GB
  Binaries:
    Node: 20.10.0 - C:\Program Files\nodejs\node.EXE
    npm: 8.19.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (120.0.2210.77)
    Internet Explorer: 11.0.22621.1

Any additional comments?

This was not an issue on 3.3.x but all version since 3.4.0 have exhibited this behavior.

[paro-paro]

I believe the same hydration issue is affecting vuetify => issue

Here is a reproduction which includes both an attribute and style mismatch on Nuxt SSR starting on vue >= v3.4.0

[edison1105]

@paro-paro

The value attribute is added to the textarea because of this line:
https://github.com/vuetifyjs/vuetify/blob/9e4daa81bfe3046fcf7e4a731809c3d554b3df54/packages/vuetify/src/components/VTextarea/VTextarea.tsx#L229

The value attribute of the textarea should be ignored