How can I make it open only one column, not two at once?

Question

Vue.js

<script type="text/x-template" id="app-template">
  <v-app>
    <v-item-group selected-class="bg-primary">
      <v-container>
        <v-row>
      <v-col cols="12">
        <v-sheet>
          <v-row>
            <v-col
              v-for="test in tests"
              :key="test"
            >
              <v-sheet                
                elevation="5" 
                rounded
                class="d-flex flex-column align-center justify-center pa-5"
                >
                <span class="text-h3">{{test.name}}</span> 
                
                <v-btn
                  @click="show = !show"
                  color="primary"
                  size="small"
                >
                  {{this.show === false ? 'Open' : 'Close'}}
                </v-btn>
                <div v-if="show" >
                  {{test.numberTest.toString(test.numberTest)}}
                </div>
              </v-sheet>
            </v-col>
          </v-row> 
        </v-sheet>
      </v-col>
    </v-row>
      </v-container>
    </v-item-group>
  </v-app>
</script>
<div id="app"></div>
const { createApp } = Vue
const { createVuetify } = Vuetify

const vuetify = createVuetify()

const app = createApp({
  template: '#app-template',
  data: () => ({
              show: false,
              tests:[
                {
                  name: 'test',
                  numberTest:[
                    '4124124124',
                    '4124124124',
                    '41241242112',
                    '12412532535'
                  ]
                },
                {
                  name: 'test',
                  numberTest: [
                    "213121212",
                    '213123123123',
                    '14124124124',
                    '421412412412'
                  ]
                },
                ]
  }),
}).use(vuetify).mount('#app')

Answer 1

Let each element of the tests array have its own show property, not just one for all. Replace: ---> ---> ---> This is the case where hidden content should be shown independently in each column. If you need to show no more than one (clicking on another one closes the current one), then show should be an index of the corresponding data element or a link to it, for example: ---> ---> --->
@click="show = !show"@click="test.show = !test.show"
{{this.show === false ? 'Open' : 'Close'}}{{ test.show ? 'Close' : 'Open' }}
<div v-if="show" ><div v-if="test.show">
@click="show = !show"@click="show = show === test ? null : test"
{{this.show === false ? 'Open' : 'Close'}}{{ show === test ? 'Close' : 'Open' }}
<div v-if="show" ><div v-if="show === test">