The client-side rendered virtual DOM tree is not matching server-rendered content in Nuxt

Question

• The other answer covered how to debug this which I did
• I am getting this error and I am not able to determine what is causing it. I have checked the HTML markup and doesn't seem to be the source of this issue
• I am using Nuxt with SSR in my code
• Here is the codesandbox link with the actual error in it

Really appreciate if anyone can tell me what is causing this error

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.

Answer 1

Well, the reason for The client-side rendered virtual DOM tree is not matching server-rendered content is probably the use of randomness - more specifically the usage of getRandomString function in the NewsList.vue component to generate unique ID's

As @kissu pointed out in his answer

any random is risky

new Date() inside NewsListItem.vue will cause problem too as the resuting Date object will be different on server and the client causing client side VDom difference from the HTML generated by server...