One of the WORST errors I think I ever see in my browser console is this one:
[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.
Not only does this mean that I've got something weird going on, I'm also losing ALL the benefits of an SSR application, because now the pages are going to have to be rebuilt in the browser! So what to do...
The notes that appear in the error message are next to useless! Not once have I found a broken table or block-level elements when tracking down one of these!
This is the one of the best uses of <ClientOnly> tags that I've found! What ever page you're loading when you see this error show up - just start surrounding the component elements with <ClientOnly> tags in the main template - that forces those components to render ONLY on the client, so that should remove this error. If it doesn't - you're looking in the wrong page! If it does - start removing the tags one component at a time until the error returns - then you've found your problem child and you can start digging in deeper.
If you have a v-if condition that resolves differently on the server than on the client, especially if there's no associated v-else - in my example, I was authorizing in the client, so v-if="isLoggedIn" was different on the client, especially when refreshing the page whilst logged in.