data-allow-mismatch does not suppress mismatch caused by v-if

[typed-sigterm]

Vue version

3.5.13

Link to minimal reproduction

https://play.vuejs.org/#__SSR__eNp9UclOwzAQ/ZWRL7RSmx7gVNIiinoAiUXA0ZcomTQu3mSP06Iq/46dqKVIqDd73uL3PAd2b23WBmRzlvvSCUvgkYJdci2UNY7gAA7rCRi9wto4fDZBE3RQO6PgKiqvuOa6NNoTNN+VKwgrWCTNqC6kx/Et13+0o9EYFks4cA0gahjthK7M7i6rTBkUahonAE5eWVvIgNGRXMDo1SXDfDZkjSnjhVBZGbnxBpBbqAoqpoWUZjdVwquCygbaqagXnB1dOVs2Ip+lmvnsTM8mjHwsU4tNtvVGx2/pg3JWGmWFRPdqScSynM2HCgnr33rqZynl5DgvGyy//plv/T7NOHtz6NG1yNkJo8JtkAZ4/fGC+3g+gcpUQUb2BfAdvZEhZRxoq6CrGPuM16d97Jcr9ObTr/eE2h9LpaCJ2fV8zuKGHy5U/417nd30urgi1v0AG1nJXg==

Steps to reproduce

Just see checkout the link. None of data-allow-mismatch = text children class style attribute can suppress the hydration error/warning. (if no errors/warnings are displayed after editing, you will see them after refreshing)

What is expected?

It should suppress the error/warning.

What is actually happening?

It does not suppress them.

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (6) x64 AMD Ryzen 5 4500U with Radeon Graphics
    Memory: 1.50 GB / 7.23 GB
  Binaries:
    Node: 22.11.0 - C:\nodejs\node.EXE
    Yarn: 1.22.22 - ~\AppData\Local\pnpm\yarn.CMD
    npm: 10.9.0 - C:\nodejs\npm.CMD
    pnpm: 9.13.2 - ~\AppData\Local\pnpm\pnpm.CMD
    bun: 1.2.0 - ~\.bun\bin\bun.EXE
  Browsers:
    Edge: Chromium (128.0.2739.79), ChromiumDev (132.0.2945.0)
    Internet Explorer: 11.0.22621.3527
  npmPackages:
    vue: ^3.5.13 => 3.5.13

Any additional comments?

No response

[babu-ch]

If you just want to work around the issue for now, you can use v-show.
Since v-if removes the allow-mismatch element, it might not be possible to use them together.
It could also be a good idea to add this to the documentation.

[typed-sigterm]

Thanks @babu-ch, warning has gone.

For this case, maybe we can add <!-- v-if allow-mismatch --> to handle this case.