[Vuejs]-VueJs – Dropdown list

const app = new Vue({
  el: '#demo',
  data: () => ({
    items: [],
    expanded: null,
    cars: [{img: '', name: 'car1', price: 5}, {img: '', name: 'car2', price: 6}, {img: '', name: 'car3', price: 8}],
    motors: [{img: '', name: 'motor1', price: 5}, {img: '', name: 'motor2', price: 6}, {img: '', name: 'motor3', price: 8}],
    bikes: [{img: '', name: 'bike1', price: 5}, {img: '', name: 'bike2', price: 6}, {img: '', name: 'bike3', price: 8}]
  }),
  methods: {
    expand(idx) {
      this.expanded = this.expanded === idx ?  null : idx
    }
  },
  mounted() {
    const car = {title: 'Cars', products: this.cars}
    const motor = {title: 'Motors', products: this.motors}
    const bike = {title: 'Bikes', products: this.bikes}
    this.items = [car, motor, bike]
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<div id="demo" class="d-flex">
  <div v-for="(group, index) in items" :key="index">
    <h2 class="text-center my-font text-light">
      <button @click="expand(group)" class="badge badge-danger menu-label-">{{ group.title }}</button>
    </h2>
    <div class="row">
      <div class="col-12">
        <div class="cards-item text-center">
          <div v-if="expanded === group">
            <div v-for="(item, idx) in group.products" :key="idx" class="card" style="width: 10rem;">
              <img :src="'./images/motos/img' + item.img + '.png'" class="card-img-top img-fluid" :alt="item.name">
              <div class="card-body d-flex flex-column justify-content-end">
                <h4 class="card-title my-font">{{ item.name }}</h4>
                <p class="badge-danger font-weight-bold">{{ item.price }}</p>
              </div>
            </div>
           </div>
        </div>
      </div>
    </div>
  </div>
</div>