【Vuetify】v-expansion-panelとv-switchの併用

やりたいこと

Google chromeの設定画面にあるような
スイッチトグルつきのアコーディオンを作りたい。

コード例

<div id="app">
  <v-app id="inspire">
    <v-expansion-panels>
      <v-expansion-panel>
        <v-expansion-panel-header :hide-actions="true" :ripple="false" @click="openFlg = !openFlg">
          <template v-slot:default="{ open }">
            <v-row>
              <v-col cols="auto" class="mr-auto mt-3">テスト</v-col>
              <v-col cols="auto" class=" my-0 py-0">
                <v-switch :input-value="open"></v-switch>
              </v-col>
            </v-row>
          </template>
        </v-expansion-panel-header>
        <v-expansion-panel-content>
          テスト
        </v-expansion-panel-content>
      </v-expansion-panel>
    </v-expansion-panels>
  </v-app>
</div>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    openFlg: false,
  }),
})

実際の画面CodePen
https://codepen.io/shota-1314/pen/JjZvyXm

2022/11/28 追記
v-switchが非活性になっていたので修正

参考文献