Vuetify 3 の Expansion Panel を自動的に開閉したい

## 概要
Vuetify 3 の [Expansion Panel](https://vuetifyjs.com/en/components/expansion-panels) を、アプリ上の何かをトリガーにして自動的に開閉する実装をします

## 実装
### そもそもの使い方
Expansion Panel を実装するには、基本的に以下のように記述すれば OK です
```vue
<v-expansion-panels>
  <v-expansion-panel>
    <v-expansion-panel-title>
      パネル 1 のタイトル
    </v-expansion-panel-title>
    <v-expansion-panel-text>
      パネル 1 の中身
    </v-expansion-panel-text>
  </v-expansion-panel>

  <v-expansion-panel>
    <v-expansion-panel-title>
      パネル 2 のタイトル
    </v-expansion-panel-title>
    <v-expansion-panel-text>
      パネル 2 の中身
    </v-expansion-panel-text>
  </v-expansion-panel>
</v-expansion-panels>
```

パネルの中にテキストを入れるだけであれば、さらにちょっとだけ簡素にできます
```vue
<v-expansion-panels>
  <v-expansion-panel
    title="パネルのタイトル"
    text="パネルの中身"
  >
  </v-expansion-panel>
</v-expansion-panels>
```

### 開閉を制御するには
1. まずは `v-expansion-panel` にそれぞれ名前をつけてあげます。あとでこれを参照することになります。
    ```vue
    <v-expansion-panels>
      <v-expansion-panel
        value="samplePanel1"
      >
        <v-expansion-panel-title>
          パネル 1 のタイトル
        </v-expansion-panel-title>
        <v-expansion-panel-text>
          パネル 1 の中身
        </v-expansion-panel-text>
      </v-expansion-panel>
      
      <v-expansion-panel
        value="samplePanel2"
      >
        <v-expansion-panel-title>
          パネル 2 のタイトル
        </v-expansion-panel-title>
        <v-expansion-panel-text>
          パネル 2 の中身
        </v-expansion-panel-text>
      </v-expansion-panel>
    </v-expansion-panels>
    ```

1. 続いて `v-expansion-panels` に `v-model` を充てます。この値に `v-expansion-panel` の `value` が格納される格好です。
    ```vue
    <v-expansion-panels
      v-model="panel"
    >
      <v-expansion-panel
        value="samplePanel1"
      >
        <v-expansion-panel-title>
          パネル 1 のタイトル
        </v-expansion-panel-title>
        <v-expansion-panel-text>
          パネル 1 の中身
        </v-expansion-panel-text>
      </v-expansion-panel>
      
      <v-expansion-panel
        value="samplePanel2"
      >
        <v-expansion-panel-title>
          パネル 2 のタイトル
        </v-expansion-panel-title>
        <v-expansion-panel-text>
          パネル 2 の中身
        </v-expansion-panel-text>
      </v-expansion-panel>
    </v-expansion-panels>
    ```
    ```vue
    <script>
      export default {
        data () {
          return {
            panel: [],
          }
        },
      }
    </script>
    ```
    こうすることで `panel` に開いている状態のパネルの `value` が入るようになります。
    このあとは、`panel` の値をいじってあげれば OK です。
1. ボタンで実装してみます
    ```vue
    <template>
      <div>
        <v-btn @click="open">
          Open
        </v-btn>
        <v-btn @click="close">
          Close
        </v-btn>
      </div>
    </template>
    
    <script>
      export default {
        data () {
          return {
            panel: [],
          }
        },
        methods: {
          open () {
            this.panel = ["samplePanel1", "samplePanel2"]
          },
          close () {
            this.panel = []
          },
        },
      }
    </script>
    ```
    今回はボタンで実装しましたが、好みのトリガーでこれらの関数が発火するようにすれば、いろいろできるはずです！

## まとめ
`v-expansion-panels` 充てた `v-model` に `v-expansion-panel` の `value` が格納されます。この配列の値をいじることで、開閉を制御できます。