Hydration not updating DOM of img-src and v-html with new client-side values

[codeflorist]

Vue version

3.3.4

Link to minimal reproduction

https://stackblitz.com/edit/github-vxyebj-admpj8?file=src%2FApp.vue

Steps to reproduce

i was stumbling on problems with certain stuff not getting updated to new values after hydration using pregenerated sites with Nuxt 3. (see issue with reproduction here: nuxt/nuxt#22784)

after looking at it, Daniel concluded, it was a a vue-related problem, visible in the reproduction provided in this here issue. here is the code:

<script setup>
import { ref, computed } from 'vue';
const timestamp = ref();
timestamp.value = Date.now();
const imgSrc = computed(
  () => `https://dummyimage.com/600x400/000/fff&text=${timestamp.value}`
);
</script>

<template>
  <div>
    These values should all be equal:<br />
    {{ timestamp }}
    <div v-html="timestamp" />
    <img :src="imgSrc" />
  </div>
</template>

What is expected?

That the contents of the img src attribute and v-html get updated with the new value of the timestamp ref after hydration.

What is actually happening?

The server-generated img src attribute and v-html stay the same - not getting updated to the new value.

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 16.20.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.4.2 - /usr/local/bin/npm
    pnpm: 8.6.10 - /usr/local/bin/pnpm
  npmPackages:
    vue: ^3.3.4 => 3.3.4

Any additional comments?

No response

[LinusBorg]

The issue title is a bit misleading. The values don't change after hydration - rather, there's a hydration mismatch because the SSR state that's reflected in the server's HTML was different from the client-side state when hydration is being performed.

So the problem here is that during hydration, when when the mismatch is found, the render does not update the DOM with the client-side values.