Как правильно написать функцию, что бы каждая кнопка по клику выдавала своё описание? А на данный момент все одним разом показывает

Как правильно написал Павел, нужно завести свои переменные для каждой кнопки:

<template>
<div class="flex justify-center items-center">
    <div class="relative my-7 mr-7">
    <button @click="toggleA" class="relative z-10 block rounded-md bg-red-200 p-1 focus: outline-none">
      Велосипеды
    </button>
    <div @click="toggleA" class="fixed inset-0 h-full w-full z-10 "></div>
    <div v-if="isA" class="absolute w-48 mt-2 right-0 bg-yellow-300 rounded-md shadow-xl z-20">
    <a href="#" class="block px-4 py-2 text-sm capitalize hover:bg-black hover:text-white">Женские велосипеды</a>
    <a href="#" class="block px-4 py-2 text-sm capitalize hover:bg-black hover:text-white">Мужские велосипеды</a>
    <a href="#" class="block px-4 py-2 text-sm capitalize hover:bg-black hover:text-white">Детские велосипеды</a>    
    </div>
    </div>

    <div class="relative my-7 mr-7">
    <button @click="toggleB" class="relative z-10 block rounded-md bg-red-200 p-1 focus: outline-none">
      Аксессуары
    </button>
    <div @click="toggleB" class="fixed inset-0 h-full w-full z-10 "></div>
    <div v-if="isB" class="absolute w-48 mt-2 right-0 bg-yellow-300 rounded-md shadow-xl z-20">
    <a href="#" class="block px-4 py-2 text-sm capitalize hover:bg-black hover:text-white">Велогаджеты</a>
    <a href="#" class="block px-4 py-2 text-sm capitalize hover:bg-black hover:text-white">Насосы</a>
    <a href="#" class="block px-4 py-2 text-sm capitalize hover:bg-black hover:text-white">Фляги</a>    
    </div>
    </div>

    
    <div class="relative my-7 mr-7">
    <button @click="toggleC" class="relative z-10 block rounded-md bg-red-200 p-1 focus: outline-none">
      Экипировка
    </button>
    <div @click="toggleC" class="fixed inset-0 h-full w-full z-10 "></div>
    <div v-if="isC" class="absolute w-48 mt-2 right-0 bg-yellow-300 rounded-md shadow-xl z-20">
    <a href="#" class="block px-4 py-2 text-sm capitalize hover:bg-black hover:text-white">Защита</a>
    <a href="#" class="block px-4 py-2 text-sm capitalize hover:bg-black hover:text-white">Обувь</a>
    <a href="#" class="block px-4 py-2 text-sm capitalize hover:bg-black hover:text-white">Одежда</a>    
    </div>
    </div>
    </div>
</template>

<script>
export default {
  data()
 {
  return {
    isA: false,
    isB: false,
    icC: false
  };
 },
 methods: {
  toggleA(){
    this.isA = !this.isA;
  },
  toggleB(){
    this.isB = !this.isB;
  },
  toggleC(){
    this.isC = !this.isC;
  },
 }
 };
</script>