Ionic Vue nested list - connected arrays

How can I achieve a two-level nested list with every record can have several tracks. like this:

<ion-list>
<ion-item :key="record.id" v-for="record in records">
            <ion-label>
                <h2>{{ record.date }} </h2> 
            </ion-label>
                        <ion-list no-lines>
                        <ion-item :key="track.id" v-for="track in getTracks(record.id)">
                             <ion-label>
                                <h2>{{ track.nr}} {{ track.name}} </h2> 
                            </ion-label>
                        </ion-item>
                        </ion-list>
        </ion-item>
</ion-list>

such as the tracks are dependent of the specific record. above code was my intuitive way of doing it but I am getting an infinite loop (max range of stack exceeded). the method getTracks returns an array of tracks

I still didn’t solve this but an update:
I am using a Map now. like this

const trackMap =  ref<Map<number, Track[]>>();

whereas the key number is the Record.id. the second ion-item line looks like this

<ion-item :key="track.id" v-for="track in trackMap[record.id]">

however this doesn’t work. the map is correctly filled but somehow there is no two-level nested display of the records with its tracks. but only the first level of the records. no error. no tracks. does someone has an idea?