¿Cómo puedo mantener el componente Player (vue-plyr), página reactiva?

reproducción automática similar a youtube/netflix, avance el video al siguiente cambiando la página, también en pantalla completa.

Mostrar.vue

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

Agregué setInterval y clearInterval, pero avanzar el video funciona 1 primera vez, la segunda vez funciona, pero después de eso ya no funciona

solo funciona la primera vez

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>