Не как не могу найти выход из решение меню на vue.js

Работаю с кодом другого человека в первый раз по этому тяжело,помогите кому не трудно надо сделать выпадающее меню магазина,точнее само мюню я сделал вот код:

<div>
<button @click="this.visible = !this.visible">Магазин</button>
<div v-if="visible">
<div v-for="(item, index) in items" :key="index" >
  {{ item.name }}

vue.js:

toggleVisible() {
this.visible = !this.visible;

а вот что есть уже из реализаций работы магазина,он работает покупается и все делается нужно просто засунуть в меню выпадающее Первое про магазин в Vue.js:

const DEFAULT_SHOP_OBJECT = {
  armor: {
    price: 1,
    profit: 1,
  },
  tool: {
    price: 1,
    profit: 1,
  }
}

вот про предметы:

const ALL_TOOLS = {
  pick: 'pick',
  flashlight: 'flashlight',
}
const ALL_ARMORS = {
  head: 'head',
  body: 'body',
  legs: 'legs',
  shield: 'shield',
  weapon: 'weapon',
}

вот как в html

<div id="buy__head" @click.self="shoppingArmor(ALL_ARMORS.head)">buy__head</div>
<div id="buy__body" @click.self="shoppingArmor(ALL_ARMORS.body)">buy__body</div>
<div id="buy__legs" @click.self="shoppingArmor(ALL_ARMORS.legs)">buy__legs</div>
<div id="buy__shield" @click.self="shoppingArmor(ALL_ARMORS.shield)">buy__shield</div>
<div id="buy__weapon" @click.self="shoppingArmor(ALL_ARMORS.weapon)">buy__weapon</div>
<div id="buy__pick" @click.self="shoppingTool(ALL_TOOLS.pick)">buy__pick</div>
<div id="buy__flashlight" 
@click.self="shoppingTool(ALL_TOOLS.flashlight)">buy__flashlight</div>