How to play different video streams using videoJS in Vuejs

Question

I am new in VueJS and trying to set up a video player where users can watch different videos by pressing on the video links. I am using videoJS library and created new vue component based on the example, first of all, I can't find a way to set up the player without a streaming link which I am looking for as starting playing the video after loading the component is not a good way and I want that user should select the video and then it plays. Secondly, this component only runs at the first stream in the player and when I try to change the stream by pressing on the video link, the player shows the loading wheel and nothing plays then.

Can someone please help me to identify the changes that I need to make here?

Here is my component code:

<template>
    <router-link to="/home">
            <img src="../images/others/backIcon.png" style="width: 60px;"/>
    </router-link>
    
    <div id="left-side">
    <span v-for="item in streamInfo" style="overflow: auto;" @click="playStream(item)">
        <img :src="item.logo">
    </span>
    </div>
    <hr>
    
    <div style="padding-left:20%; padding-top:5%">
         <!-- Placeholder for TV stream -->
      <video preload="auto" ref="videoPlayer" class='video-js   vjs-default-skin    vjs-live  vjs-liveui' width='640' height='360' controls autoplay>
               <source  :src="videoSrc" />
        </video>
    
    </div>
    
</template>
    
    
 <script lang="ts">
    import streamInfo from '../stream/data.json';
    import videojs from 'video.js';
    
    
    export default {
    name: 'VideoPlayer',
       data() {
            return {
                timestamp: '',
                streamInfo,
                player: null,
                videoSrc: 'https://spotlight-redbox.amagi.tv/playlist.m3u8'
            }
        },
          methods: {
    
      playStream: function(info){
    
      this.videoSrc=info.stream;
      //this.player.setAttribute('src',info.stream);
      this.player.load();
      this.player.play();
                         }
    
       },
    
                      mounted() {
                        this.player = videojs(this.$refs.videoPlayer, this.options, () => {
                          this.player.log('onPlayerReady', this);
                        });
                      },
                      beforeDestroy() {
                        if (this.player) {
                          this.player.dispose();
                        }
                      }
    };
    
    
 </script>