<div id="app">
  <v-app>
    <v-content>
      <v-container>
       <template>
  <v-item-group v-model="selected" mandatory>
    <v-container>
      <v-row>
        <v-col v-for="item in items" :key="item.key" cols="12" md="4" @click="clickAction(item.key)">
          <v-item v-slot:default="{ active, toggle }">
            <v-card
              :color="active ? '' : ''"
              class="d-flex align-center"
              @click ="toggle($event), clickAction"
              :flat="!active"
            >
              <v-list-item>
                <v-list-item-avatar :color="active ? 'primary' : ''">
                  <v-icon :dark="active">{{ item.icon }}</v-icon>
                </v-list-item-avatar>
                <v-list-item-content>
                  <v-list-item-title class="headline">{{
                    item.title
                  }}</v-list-item-title>
                  <v-list-item-subtitle>Key: <b>{{ item.key }}</b>. Active: <b>{{ active }}</b></v-list-item-subtitle>
                  
                </v-list-item-content>
              </v-list-item>

              <v-scroll-y-transition>
                <div
                  v-if="active"
                  class="display-3 flex-grow-1 text-center"
                >
                </div>
              </v-scroll-y-transition>
            </v-card>
          </v-item>
        </v-col>
      </v-row>
    </v-container>
  </v-item-group>
</template>
      </v-container>
    </v-content>
  </v-app>
</div>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    items: [
      {
        title: "Foo",
        icon: "mdi-playlist-check",
        key: "foo",
        active: true
      },
      {
        title: "Bar",
        icon: "mdi-chart-timeline-variant",
        key: "bar"
      },
      {
        title: "Zar",
        icon: "mdi-cached",
        key: "zar"
      }
    ],
    selected: []
  }),
  methods: {
    clickAction(key) {
     console.log(key);
      return true
    }
  }
})