async created() {
    if (this.tournamentId === 0) await router.push('/');
    this.events = await this.fetchEvents(this.tournamentId);
    this.setRings(this.events);
  },
  methods: {
    async fetchEvents(tournamentId){
      const res = await fetch(httpserver + `all-events.php?tid=${tournamentId}`)
      const data = await res.json();
      return data
    },
    setRings(events){
      events.forEach(e => {
          e.rings = this.fetchRings(e.EventID);
      })
    },
    async fetchRings(eventId){
      const res = await fetch(httpserver + `pool-information.php?eid=${eventId}`)
      let data = await res.json();
      return data;
    }
 }

For each tournament, I need to make another call to get the pools. This however doesn't work very well, it seems making the methods async doesn't really cause vue to wait until until it's done loading before trying to move on.

I start with an error like this... Events.vue?aa9c:51 Uncaught (in promise) TypeError: events.forEach is not a function

The page will load, but it rarely will display any of the data, because it will render before the data is done loading.

How can I chain up two fetchs in a way that the render won't happen until after the data has been fetched?