Node attribute value is not reactive after client side hydration

Version

2.6.11

Reproduction link

https://codesandbox.io/s/ssr-reactivity-up6nh?file=/pages/index.vue

Steps to reproduce

• The id attribute of the div does not match the myid value from the component (requires page refresh sometimes on first load).
• Notice that $forceUpdate() (first button) does not update the id attribute of the div
• Changing the value of the val data (second button) property triggers the reactivity

What is expected?

Every reference to the myid computed property should match

What is actually happening?

The id attribute of the div does not match the myid value

---

The same component used in client-side rendering does not exhibit this issue.

[ValdoGhafoor]

Hi, I encountered the same issue Is there any other solution than having to use mounted ? We generate unique IDs for our components and use them also for some aria attributes

If we set those ID’s in mounted, we will loose SEO gain from accessibility attributes

Edit: putting a ref on the bugging node solve the issue

[berniegp]

@posva yeah it looks similar to #10260, but I’m not knowledgeable enough about Vue internals to be sure.

I did update my repro to use Vue.prototype.$isServer instead of Math.random() for greater clarity.