Создание необычной таблицы HTML

Question

Итак, у меня есть данные, которые выглядят так:

[
  {
    "role": "p1",
    "activities": [
      {
        "games": ["g1", "g2", "g3"],
        "prize": "prize1"
      },
      {
        "games": ["g1", "g4", "g3"],
        "prize": "prize2"
      },
      {
        "games": ["g2", "g3"],
        "prize": "prize2"
      },
      ..... (n number of elements)
    ]
  },
  ... (m number of elements)

]

Мне нужно составить таблицу с заголовками «роль» и «приз», и каждый заголовок «приз» будет иметь еще 4 заголовка: «g1», «g2», «g3», «g4». Соответственно, я должен пометить ячейки, в которых есть соответствующие игры, буквой «Y» или «N».

Результат показан ниже:

Это то, что я пробовал до сих пор:

<table>
            <col>
            <colgroup span="4" v-for="(a, idx) in items[1].activities" :key="idx"></colgroup>
            <tr>
              <th rowspan="2">Role</th>
              <th v-for="a in items[1].activities" colspan="4">{{a.prize}}</th>
            </tr>
            <tr>
              <thead>
                <tr>
                  <th scope="col">G1</th>
                  <th scope="col">G2</th>
                  <th scope="col">G3</th>
                  <th scope="col">G4</th>

                </tr>
              </thead>
            </tr>
            <tr v-for="item in items">
              <td>{{item.role}}</td>
              <tbody>
                <tr>
                  <td v-for="a in item.activities">{{a.games.includes('G1') ? 'Y' : 'N'}}</td>
                  <td v-for="a in item.activities">{{a.games.includes('G2') ? 'Y' : 'N'}}</td>
                  <td v-for="a in item.activities">{{a.games.includes('G3') ? 'Y' : 'N'}}</td>
                  <td v-for="a in item.activities">{{a.games.includes('G4') ? 'Y' : 'N'}}</td>
                </tr>
              </tbody>
            </tr>
            <tr>
            </tr>
          </table>

У меня странный вид стола, ничего похожего на то, что я хочу. Может кто-нибудь сказать мне, где я иду не так?

Я написал это в Vue.js, но любой фреймворк принимается, пока он получает результат.