So I have have a search component and the search component sends data to parent player.component. I send video id and an object with 5 search results to player.component.

<template>
  <div class="mobile-screen">
    <b-container>
      <search-component
        v-on:updateVideoId="updateVideoId($event)"
        v-on:playlist="playlist($event)"
      />

      <youtube :video-id="videoId" ref="youtube" @playing="playing"></youtube>

      <button @click="playVideo">play</button>
      <button @click="stopVideo">stop</button>
      <button @click="nextVideo">next</button>
      <b-row>
        <b-col>
          <ul v-if="info">
            <li v-for="(item, index) in info.items" :key="index.etag">
              <p class="text">{{ item.snippet.videoId }}</p>
            </li>
          </ul>
        </b-col>
      </b-row>
    </b-container>
  </div>
</template>

So I have access to videoId and and the search result object. But i want my player to be able to play next video in my search results and I am not sure on how to do this.

<script>
import SearchComponent from "./SearchComponent.vue";
//import axios from "axios";
export default {
  components: { SearchComponent },
  name: "PlayerComponent",
  props: {
    msg: String,
  },
  data() {
    return {
      searchResult: null,
      videoId: "lG0Ys-2d4MA",
    };
  },
  mounted() {},
  methods: {
    updateVideoId(payload) {
      this.videoId = payload;
    },
    nextVideo() {},
    playlist(payload) {
      this.searchResult = payload;
      console.log("playlist", payload);
      this.player.nextVideo();
    },
    playVideo() {
      this.player.loadPlaylist({
        list: String,
        listType: String,
        index: Number,
        startSeconds: Number,
      });
      this.player.playVideo();
    },
    stopVideo() {
      this.player.stopVideo();
    },
    playing() {
      console.log(" we are watching!!!");
    },
  },
  computed: {
    player() {
      return this.$refs.youtube.player;
    },
  },
};
</script>