Attributes are not updated on the client side (hydration issue 🤔)

[ilyasmez]

Environment

• Operating System: Linux
• Node Version: v16.14.2
• Nuxt Version: 3.0.0-rc.3
• Package Manager: npm@7.17.0
• Builder: vite
• User Config: -
• Runtime Modules: -
• Build Modules: -

Reproduction

https://stackblitz.com/edit/nuxt-starter-fqaqgt?file=app.vue,package.json

Describe the bug

Seems like Nuxt doesn't update the attributes when mounted on the client side.
In the repro above you can see that the text node is updated to match the right value on the client side (isClient = true), while the attribute (you can to inspect the div), says false.

Additional context

Using Vue Devtools, I can see that Vue is detecting the right value. But seems like Nuxt is just not updating the DOM for the attribute.

Logs

No response

[danielroe]

You are changing the value before hydration which is technically a hydration mismatch. However, Vue is generous when it comes to attributes and does not throw an error.

You should ensure that your component state matches between client/server, until initial hydration takes place. Example.