Display nested loop in Vue from a GraphQL query

Question

I'm using OneGraph to pull data from Spotify. I can't figure how to render out the 3rd nested loop though even looking at other Vue code samples. I'm trying to return the artist name for each playlist as shown below.

<template>
    <ul>
        <li v-for="(item, index) in $page.oneGraph.spotify.me.playlists" :key="index">
            <ol>
                <li v-for="track in item.tracks" :key="track.playlists">
                    {{track.name}} -
                    <span v-for="artist in item.tracks.artists" :key="artist.tracks">
                        {{artist.name}}
                    </span>
                </li>
            </ol>
        </li>
    </ul>
</template>

The query:

{
  spotify {
    me {
      id
      playlists(limit: 1) {
        name
        tracks {
          name
          artists {
            name
          }
        }
      }
    }
  }
}

Answer 1

Nested loop:

<li v-for="track in item.tracks" :key="track.playlists">{{track.name}}</li>

Child nested loop:

<span v-for="artist in track.artists" :key="artist.tracks" {{artist.name}}</span>