【メモ】Nuxt + Vuetify でSSR時だけ一部のUIが機能しなくなる問題

現象

Vuetifyの <v-expansion-panel> を使用しているページで、
SSR時のみ他のUIが動作しなくなる現象が発生したのでメモ。

再現コード

最小の再現コードを探った結果、どうやら、<v-expansion-panel-header> の中で、<div>と<v-btn> を使用していると発生するらしい。

<v-expansion-panel-header>
  <div>
    <span>title</span>
    <v-btn>Button</v-btn>
  </div>
</v-expansion-panel-header>

対応

<div>の中に<v-btn>という条件下のみ発生するようなので、

を<p>や<section>に置き換えると問題は解決した。

<v-expansion-panel-header>
  <section>
    <span>title</span>
    <v-btn>Button</v-btn>
  </section>
</v-expansion-panel-header>

あるいは、SSR時限定の現象なので、<client-only>を使うことでも回避できる。

<v-expansion-panel-header>
  <div>
    <span>title</span>
    <client-only><v-btn>Button</v-btn></client-only>
  </div>
</v-expansion-panel-header>

<client-only>で回避しておくのが安全か。

コンソールにもサーバー側のログにもエラーが出ないので原因を特定するのに困った。
……なんだコレ？