In my vue-app I try to loop through some video-items, get their youtube-id and fetch their thumbnails.

so I have:

<div class="videos">
  <div v-for="(video, index) in videos" :key="index" :youtube-id="video.id" class="video-item">
    <div @click="play(video.id)">
     <img :src="thumbnail" :width="420" :height="240" />
    </div>
  </div>
</div>

then I have

data(){
  return {
    thumbnail : '',
    thumbnails: [] // don't know if I can use that
   }
},

methods: {
   getVideoThumbNails(){
      const videos = document.querySelector(".videos");
      const iframes = videos.querySelectorAll(".video-item");

      iframes.forEach(function (item, index) {
        let youtube_video_id = item.getAttribute("youtube-id");

        if (youtube_video_id.length === 11) {
           const video_thumbnail = "http://img.youtube.com/vi/" + youtube_video_id + "/maxresdefault.jpg";
        }
        
        // this.thumbnail = video_thumbail
        this.thumbnails.push(video_thumbnail);
     });
   }
},
mounted(){
 this.getVideoThumbNails() 
}

For some reason I don't know, this gives me the error TypeError: Cannot read properties of undefined (reading 'thumbnails')

Can someone tell me what I'm doing wrong? And how can I apply those images in the end?