v-bind not update dom in client side when data in client side is different from the server side

[maunier]

Version

2.6.10

Reproduction link

https://github.com/maunier/nuxt-learning

Steps to reproduce

npm install npm run dev http://127.0.0.1:8080/

What is expected?

i expect the div is like this:

<div text="isClient">isClient</div>

What is actually happening?

but now it is:

<div text="isServer">isClient</div>

---

it is not Nuxt's issue, I have tested in my own vue-ssr server without Nuxt, the problem is exsist still. but the that project is not on the github, so i paste the nuxt project's link here

the core code is like this:

<div :text="text">{{ text }}</div>

data () {
      return {
        text: ''
      }
    },

    created () {
      this.text = Vue.prototype.$isServer ? 'isServer' : 'isClient'
    },

[posva]

Seems to be related to https://github.com/vuejs/vue/issues/7787, it looks like a bug to me but I might not considering something

so a workaround is to use a ref on the element

[posva]

I didn't say it, but next time please provide a real repro not a project you are testing things on. I created o bare foot Nuxt project to repro it and a correct minimal repro would have been what was provided at https://github.com/vuejs/vue/issues/9231

[sevilyilmaz]

so a workaround is to use a ref on the element

@posva could you elaborate on this comment for me to understand what does ref do to make v-bind work?

I have a similar problem that is reported in #11398 which the workaround that you suggested here fixed it.

[rtcpw]

This is still an issue to this day. Any update / workarounds? I am not sure how ref is supposed to fix this. I already have a ref on the element yet I can still reproduce this issue.