Respuesta parcial: con Chrome DevTools, puede localizar el problema y ver exactamente qué elemento causó el problema. Haga lo siguiente (lo hice con Nuxt 5.6.0 y Chrome 64.0.3282.186)

1. Mostrar DevTools en Chrome (F12)
2. Cargue la página que causa la advertencia "el árbol DOM virtual renderizado del lado del cliente...".
3. Desplácese hasta la advertencia en la consola de DevTools.
4. Haga clic en el hipervínculo de la ubicación de origen de la advertencia (en mi caso, fue vue.runtime.esm.js:574).
5. Establezca un punto de interrupción allí (haciendo clic izquierdo en el número de línea en el navegador de código fuente).
6. Haz que vuelva a aparecer la misma advertencia. No digo que siempre sea posible, pero en mi caso simplemente recargué la página. Si hay muchas advertencias, puede verificar el mensaje moviendo el mouse sobre la variable msg .
7. Cuando encontró su mensaje y se detuvo en un punto de interrupción, mire la pila de llamadas. Haga clic en un cuadro hacia abajo para llamar al "parche" para abrir su código fuente. Pase el mouse sobre la llamada a la función de hydrate 4 líneas arriba de la línea de ejecución en el patch . Se abriría un hipervínculo a la fuente de hydrate .
8. En la función de hydrate , muévase unas 15 líneas desde el principio y establezca un punto de interrupción donde se devuelva false después de assertNodeMatch devolviera false . Establezca el punto de interrupción allí y elimine todos los demás puntos de interrupción.
9. Haga que la misma advertencia vuelva a suceder. Ahora, cuando se alcanza el punto de interrupción, la ejecución debe detenerse en la función de hydrate . Cambie a la consola de DevTools y evalúe elm y luego vnode . Aquí, elm parece ser un elemento DOM renderizado por el servidor, mientras que vnode es un nodo DOM virtual. Elm se imprime como HTML para que pueda averiguar dónde ocurrió el error.

Para mí, este error ocurrió porque obtuve la lista Array en AsyncData y rendericé las etiquetas <tr> por v-for , puse los códigos v-for en bloques <client-only> y el problema se resolvió

Hay muchas formas de solucionar este problema, pero la mayoría de ellas no son soluciones reales, solo curitas piratas. Para señalar algunos:

• envuélvalo en etiquetas <client-only> , pero tenga cuidado con algunos detalles importantes
• usando un v-show en lugar de un v-if
• tratando de hackear algunos ciclos de vida
• etc...

Recomiendo encarecidamente leer este magnífico artículo escrito por Alexander Lichter.

https://blog.lichter.io/posts/vue-hidratación-error/

Él le explicará que debe diagnosticar por qué sucede esto y solucionar el problema real.
Básicamente, cada vez que algo es diferente de lo que se generó en el servidor y lo que está disponible cuando se realiza la hidratación en el cliente , se producirá este error.

Algunos de los cuales son:

• HTML no válido (que tiene un elemento de bloque dentro de un <p> , lo mismo ocurre con a etiqueta anidada en otra, etc.)
• Scripts de terceros jugando con sus componentes
• estado diferente en el servidor vs cliente
• cualquier aleatorio es arriesgado ( new Date() por ejemplo)
• cualquier página relacionada con la autenticación

Recomiendo encarecidamente leer el artículo para entender en las propias palabras de Alexandre cómo manejar este tipo de problema. Si tiene prisa, siempre puede usar una solución de curita, pero intente solucionar el problema para obtener el mejor rendimiento y mantener el código limpio.