Как красиво и правильно реализовать открытие и появление верстки на Vue.js?

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

<div
  v-for="(bankOffers, bankName) in offers.data"
  :key="bankName"
  class="mt-[25px] sm:m-[42px] cursor-pointer">
  <div @click="seen = !seen" class="flex flex-row items-center">
    <div class="w-[52px] h-[52px] pt-[20px] shadow-brand rounded-brand"></div>
    <div class="ml-[20px] text-[18px] font-medium">{{ bankName }}</div>
    <svg
      v-if="seen"
      class="svg-icon w-[12px] h-[12px] ml-[25px] text-brand-gray mr-auto flex-shrink-0"
    ><use xlink:href="#chevron" width="100%" height="100%"></use></svg>
    <svg
      v-else
      class="svg-icon w-[12px] h-[12px] ml-[25px] text-brand-gray mr-auto flex-shrink-0 -rotate-90">
      <use xlink:href="#chevron" width="100%" height="100%"></use>
    </svg>
  </div>
</div>

А в Data:

data() {
    return {
      seen: false,
    }
  },

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