Всем привем, пробема с v-for во VUE

Суть пробемы - на сайте два списка отрисовываются через v-for. Первый отрисовывает контент, по сути 9 кнопочек при нажатии на которые должны открываться соответствующие модальные окна из второго списка. То есть 1 список это кнопочки, 2 список это модальные окна(скрытые). При клике на кнопочку 3 например, дожно отобразиться модальное окошко 3. (для примера оставил по 2 объекта в дата).

<template>
  <h1>Portfolio</h1>
  <ul class="portfolio__video-item">
    <li
        v-for="video in mainVideo"
        :key="video.id"
        class="portfolio__video-item__subitem"
    >
      <img :src="video.img">
      <div class="portfolio__video-descr">
        <div class="portfolio__video-descr__title">
          {{ video.title }}
        </div>
        <div class="portfolio__video-descr__subtitle">
              <span>
                {{ video.subtitle }}
              </span>
        </div>
      </div>
    </li>
  </ul>

  <div
      class="modal"
      v-for="modal in modals"
      :key="modal.id"
  >
    <div class="modal__close">&times;</div>
    <div class="modal__wrapper" >
      <div class="modal__player">
        <iframe
            class="modal__player-item"
            :src="modal.url"
        ></iframe>
      </div>
      <div class="modal__descr-block">
        <h2 class="modal__descr-block__subtitle">
          <span>{{ modal.title }}</span>
        </h2>
        <div class="modal__descr-block__descr">
          <span>{{ modal.description }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      mainVideo: [
        {
          id: 1,
          img: require("@/assets/images/video1.jpg"),
          title: 'SH’U RAINCOATS',
          subtitle: 'реклама бренда одежды'
        },
        {
          id: 2,
          img: require("@/assets/images/video2.jpg"),
          title: 'CHEEK TO CHEEK',
          subtitle: 'короткометражный фильм'
        }
      ],
      modals: [
        {
          id: 1,
          url: 'https://player.vimeo.com/video/156585061',
          title: 'SH’U Raincoats',
          description: "Проморолик для бренда одежды"
        },
        {
          id: 2,
          url: 'https://player.vimeo.com/video/454766192',
          title: 'Cheek To Cheek',
          description: "Экранизация пьесы Джона "
        },
      ],
    }
  }
}
</script>