How can I keep the Player component (vue-plyr), reactive page?

autoplay similar to youtube/netflix, advance the video to the next by changing the page, in fullscreen too.

Show.vue

methods: {
    nextVideo() {
      console.log("next video");
      Inertia.visit("/videos/" + this.plyr.next, {
        preserveScroll: false,
        preserveState: true,
      });
    },
  },

I added setInterval and clearInterval, but advancing the video works 1 first time, the second time it works, but after that it doesn't work anymore

it only works the first time

Player.vue

<template>
  <vue-plyr ref="plyr">
    <video crossorigin playsinline data-poster=""></video>
  </vue-plyr>
</template>

<script>
import Ply from "plyr";
export default {
  name: "Player",
  props: {
    src: {
      type: String,
    },
    poster: {
      type: String,
    },
    markers: {
      type: Array,
    },
    title: {
      type: String,
    },
    subtitles: {
      type: Array,
    },
  },
  data() {
    return {
      player: null,
      isEnded: false,
      octopus: null,
      timerCircular: 0,
      timerLabel: 5,
    };
  },
  mounted() {
    this.player = this.$refs.plyr.player;
    this.player.source = {
      type: "video",
      sources: [
        {
          src: this.src,
          type: "video/mp4",
        },
      ],
    };

    this.player.on("playing", () => console.log("player started"));
    this.player.on("pause", () => console.log("player paused"));
    this.player.on("ended", this.ended);
  },
  beforeDestroy() {
    this.player.destroy();
  },
  watch: {
    src() {
      this.player.source = {
        type: "video",
        sources: [
          {
            src: this.src,
            type: "video/mp4",
          },
        ],
      };
      this.player.on("ready", () => {
        this.player.play();
      });
    },
  },
  methods: {
    ended() {
      this.isEnded = true;

      const timerLabel = setInterval(() => {
        console.log(this.timerLabel);
        this.timerLabel -= 1;
        if (this.timerLabel == 0) {
          clearInterval(timerLabel);
          clearInterval(timerCircular);
          this.$parent.$parent.nextVideo();
          this.isEnded = false;
          this.timerCircular = 0;
          this.timerLabel = 5;
        }
      }, 1000);

      const timerCircular = setInterval(() => {
        this.timerCircular += 5;
      }, 200);
    },
  },
};
</script>

<style lang="scss" scoped>
</style>