Multiple v-for loops in same vue file

I'm trying to populate a table using three for loops from my api.

  const events = await app.$axios.get('/api/events/')
  const markets = await app.$axios.get('/api/markets/')
  const markets = await app.$axios.get('/api/runners/')

I need to make sure that the table rows index is runners since the runners column will have more runners than markets and markets will have more rows than events.

Like so.

Event Market
           Runner
           Runner
           Runner
      Market
           Runner
           Runner   

When I try to do multiple for for loops in the same vue file I get this error.

duplicate attribute key

Why do I get this error from using id in separate loops? My Question is how do I populate the table based on runner index for each row?

Here's my code so far.

  <template>
    <div class="course-list-row">
      <th style="width:5%"> Start date </th>
      <th style="width:5%"> Event name</th>
      <th scope="col">Market</th>
      <th scope="col">Runner</th>

      <tr v-for="(event, index) in events" :key=id
          v-for="(market, index) in markets" :key=id
          v-for="(runner, index) in runners" :key=id>
        <td> </td>
        <td> </td>
        <td> </td>
        <td> </td>

        <td />
      </tr>
    </div>
  </template>

  <script>
    export default {

      async asyncData({
        app
      }) {

        try {
          const events = await app.$axios.get('/api/events/')
          const markets = await app.$axios.get('/api/markets/')
          const runners = await app.$axios.get('/api/runners/')

          return {
            events: events.data.results,
            markets: markets.data.results,
            runners: runners.data.results,
            error: false
          }
        } catch (e) {
          console.log('error', e)
          return {
            events: [],
            markets: [],
            runners: [],
            error: true
          }
        }
      },
    };

  </script>


  <style>
    th,
    td {
      font-family: ‘Lato’, sans-serif;
      font-size: 12px;
      font-weight: 400;
      padding: 10px;
      text-align: left;
      width: 0%;
      border-bottom: 1px solid black;

    }

  </style>

The api responses have key of id as below.

/api/events

{
  "count": 80,
  "next": null,
  "previous": null,
  "results": [{
    "id": 103,
    "sport_id": "9",
    "event_name": "Guilherme Clezar vs Uladzimir Ignatik",
    "start_date": "12-11-19",
    "status": "open",
    "event_id": 1273804660340017
  }]
}

/api/markets

{
  "count": 128,
  "next": "http://localhost:8000/api/markets/?page=2",
  "previous": null,
  "results": [{
    "id": 151,
    "market_id": 1273804670840017,
    "market_name": "Moneyline",
    "status": "open",
    "volume": 1107.5453,
    "event": 103
  }]
}

from Multiple v-for loops in same vue file