Vuetify - How to keep the first expansion panel open by default and if I open another panel, the others should be close?

Question

Basically, the thing is I have 4 expansion panel and I want the first panel should be open or expanded by default and when I click on the second panel the first one should be close.

In vuetify doc they have both the eg. one for how to by default open the panel and second is, when one should open others should be closed.

<template>
  <div>
 <div class="text-xs-center mb-3">{{ panel }}</div>    
 <v-expansion-panel
  expand
  v-model="panel">
  <v-expansion-panel-content
    v-for="(details,index) in marketCapDetails"
    :key="index">
    <template v-slot:header>
       <p>{{details.sr_no }}</p>
       <p>{{details.currency }}</p>
    </template>
    <v-card>
      #some code
    </v-card>      
  </v-expansion-panel-content>
</v-expansion-panel>

and in my script

export default {   
  data() {
    return {
            panel:[true, false, false, false]
         }   
      }
}

Answer 1

In the meanwhile there have been breaking changes:

If you have 4 panels and the first and the third should be open:

panel: [0, 2]

Without the multiple prop its only the index of the panel and not an array:

panel: 0

(first panel open)