Nuxt3 Hydration node mismatch

Hydration node mismatch

サーバサイドとクライアントサイドでrenderした時の差異がある場合上記のerrorが出る気がする

下記のコードとか出そうな気がする

<template>
  <div v-if="show">
    hoge
  </div>
</template>

<script setup lang="ts">
const show = computed(() => { return document===undefined})
</script>

この場合 Mount後に書き出せば問題ないの気がするのでで以下のようにすればいい気もする

<template>
  <div v-if="show">
    hoge
  </div>
</template>

<script setup lang="ts">
const show = ref(true)
onMounted(
  () = > {show.value = computed(() => { return document===undefined})}
)
</script>

参考

https://www.digitalocean.com/community/tutorials/vuejs-component-lifecycle-ja