Vue js - Fetch multiple Youtube playlists from Youtube api and create multiple carousel with each playlist items

With Vue js, how to loop a template

For example, i want to show multiple youtube playlist from a json with playlist id.

const pls = Array('PL1DD10E84B9B08A35', 'PL1DD10E84B9B08A35', 'PLPKaZQAWre5aECAN-X5-iiHoWxu3c1Q6_', 'PLPKaZQAWre5aECAN-X5-iiHoWxu3c1Q6_', 'PL-Va2w1HwuNkLCHj9pftb1M6EXjEG24sd');

All playlist IDs will use Fetch to get all the videos infos from the YouTube API.This will create multiples carousel for each playlist from a vue template with images.

I think it will need to fetch with promise for multiple fetchs. Like this example: https://jsfiddle.net/onigetoc/14z8dkmo/

Do you think i will need to push all Youtube api results into one object and i should i do it?

I also have to track the index of each images to do others stuff later like showing the video.

For the multiple carousels, i guess i will have to do something like this.

<img v-if="allitems[playlistIndex][thisindex]" :src="allitems[playlistIndex][thisindex].thumbnailHQ">

For my single test with only one playlist i used this, and it's working.

<img v-if="items[thisindex]" :src="items[thisindex].thumbnailHQ">

Since i do not know how many playlists will appear in advance i guess i should count the number of playlist and track the playlist Index. This is why i may have to use [playlistIndex] and [thisindex] to get track of the right item from the v-for for future user interactions.

I make it work with only one playlist, but it gets a lot more complicated with multiple playlists.

No, i do not use Vue Router but only hiding and showing some div or play with css index and some css overlay like loading and showing the video.

for my test with only one playlist i used a new Vue with data like this.

data: {  thisindex: 0,  items: [],}

I guess that my template should create the same number of playlist with a v-for and i will using another v-for to show each playlist items.

I fetch the Youtube api from mounted() and some methods: to create some useful functions.

To resume, i want to fetch multiple playlist from the Youtube api and create multiple carousels with Vue js 3

Do you have better ideas to make this work and how can it be done?