Nuxt.js/Vue.js повторное модальное окно

Мой вопрос касается основной логики для вещи ниже

1) У меня есть компонент раздела и модальный компонент

2) В компоненте раздела у меня есть массив объектов с заголовком и описанием

3) В модальном компоненте у меня есть шаблон для модального (я использую Bulma framework для модального)

Теперь в разделе у меня есть 7 кнопок с циклом v-for для назначения класса «активен», и при нажатии каждой кнопки открывается отдельный модальный режим.

Вопрос: Как разобрать данные в модальное окно? Я хочу, чтобы мой модал можно было использовать повторно. Так что в начале мой модальный вообще пуст. При нажатии кнопки 1 у меня есть title1 descr1, при нажатии кнопки 2 title2 descr2 и т. д.

Мой код:

Компонент раздела:

<template>
<base-section name="clusters">

  <div class="section-map"> 
    <button
    class="section-btn"
    v-for="(item, index) in sectionItems"
    :key="index"
    :class="[`section-btn-num${index + 1}`, {'is-active': item.state}]"
    @click="toggleModal(item)" 
    >
      <div class="section-btn__text">
        {{ item.title }}
    </div>
    </button>
  </div>

  <div class="modal"
  v-for="(item, index) in sectionItems"
  :key="index"
  :class="{'is-active': item.state}"
  >
  <div class="modal-background"></div>
  <div class="modal-content">
  </div>
  <button 
  @click="item.state = false"
  class="modal-close is-large" 
  aria-label="close">
  </button>
</div>

</base-section>
</template>

<script>
import BaseSection from './Section';
import BaseModal from './Modal';
export default {
  components: {
    BaseSection,
    BaseModal,
  },

  methods: {
    toggleModal: (item) => {
      item.state = !item.state;
    }

  },
  data() {
    return {
      sectionItems: [
        {
          title: 'title1',
        },
        {
          title: 'title2',
          description: 'descr',
        },
        {
          title: 'title3',
          description: 'descr',
        },
        {
          title: 'title4',
          description: 'descr',
        },
        {
          title: 'title5',
          description: 'descr',
        },
        {
          title: 'title6',
          description: 'descr',
        },
        {
          title: 'title7',
          description: 'descr',
        },

      ].map(item => ({ ...item, state: false }))
    };
  }
};
</script>

<styles>
/* are skipped */
</styles>

Модальный компонент:

<template>
  <div class="modal">
      <div class="modal-background"></div>
      <div class="modal-content">

        <div class="modal__header">
          <slot name="modal__header">

          </slot>
        </div>

        <div class="modal__body">
          <slot name="modal__body">

          </slot>
        </div>

      </div>
      <button 
      @click="item.state = false"
      class="modal-close is-large" 
      aria-label="close">
      </button>
  </div>
</template>

<script>
import ClustersSection from './ClustersSection';
export default {
  components: {
    ClustersSection,
  },
  props: {
    }
  },
};
</script>

<style lang="scss">
</style>