Vue version

3.3.4

Link to minimal reproduction

https://play.vuejs.org/#eNp9Ustu2zAQ/JUFUcAyalhocxMkFU2RQwv0gTZHHiLJK5kJRQp82C4E/XuXlJU6yIMHcbUz3Jkld2Sfh2F78MgyljvsB1k5LLkCWvlOHM7hvEICMuv+Siw4G+uqeeiM9mqXwZ03Mnk31t20vps4K/P0pcPlGBjTJbjEeXqhTr+2MWJwYNH5IVJFP2jjYDTYbkCra2y1we+k7iZoje5hRV2swlmA1qvGCa3AmUrZ32i1Nw0m5HE9zrKiTTqp60re7oXdHoXa6eOCARhSNQqID+9h9akqPlDhAEwoLb5O+7jQwkafsDVaWRc5BXC2d26wWZqeaHF2yai7ggq2yXPL65n2pOckWUNRwtlK3W0PlfRIEs+PRy+xRp7Ot1qyDXOWZFvRbe+tVvT4sRJnje4HIdH8HML9Wc6yRYOzSkp9/BZzznjcLPlmj83DC/l7Sy1mFPwyaNEckLNHzFWmQzfDN39+4IniR7DXOy+J/QYYOpQ+eJxp1zSFZPuCF91+jUMjVHdrb04OlV2aCkbjxUQ+ZzQ7X95o/b/dq+3V+XEnNv0Don0PQQ==

Steps to reproduce

<template>
    <div>
          <div :style="background-image: url(${bg});"></div>
          <div>{{bg}}</div>
    </div>
</template>

<script setup>

  const bg= ref(transResource(url))

  onBeforeMount(() => {
    bg.value = transResource(url)
  })

</script>

this is a ssr project

transResource function calculate different url depend on is server or client but the two bg renderings above are different yes, I know hydrate must ensure consistent rendering between the client and server。But when I use it in the wrong way, the page becomes more obvious

What is expected?

The above two bg render the same

What is actually happening?

When using Vue3 SSR hydrate, for ordinary variables rendered in the dom, if the server-side rendering is inconsistent with the client-side rendering, the client-side variable will be used. However, the style variable bound in the template will not change, which is still the same as the server-side variable

System Info

No response

Any additional comments?

No response