Hydration mismatch when using a menu. Also causes error on navigating away

[chrissyast]

// myPage.vue
<template>
  <div>
    <nuxt-link :to="link">
      Go to this other page
    </nuxt-link>
    <v-btn>
      Click me
      <v-menu activator="parent">
        <v-list-item v-for="x in ['a','b','c']" :key="x">
          {{ x }}
        </v-list-item>
      </v-menu>
    </v-btn>
  </div>
</template>

Console log on loading page...
try.js:49 [Vue warn]: Hydration children mismatch in <div>: server rendered element contains fewer child nodes than client vdom. at <VOverlay ref=Ref< undefined > class="v-menu" activator="parent" ... > at <VMenu activator="parent" > at <VDefaultsProvider key="content-defaults" disabled=true defaults= {VIcon: {…}} > at <VBtn>
On clicking the link...

    chunk-3NMN3MUW.js:7946 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'parentNode')
    at remove (chunk-3NMN3MUW.js:7946:1)
    at Object.remove (chunk-3NMN3MUW.js:6812:1)
    at unmount (chunk-3NMN3MUW.js:6488:1)
    at unmountChildren (chunk-3NMN3MUW.js:6584:1)
...

New page doesn't load.

Comment out the menu and try the link again and it redirects successfully.

[KaelWD]

You need createVuetify({ ssr: true })

[chrissyast]

Thank you 👍