From 0c727b893e37bbc31e60bd7d7b284af8a5dfc0ec Mon Sep 17 00:00:00 2001
From: Miau Lightouch <5199594+miaulightouch@users.noreply.github.com>
Date: Tue, 26 Dec 2023 20:21:39 +0800
Subject: [PATCH] fix: prevent vue3 component reload too frequently (#400)

Co-authored-by: billy <billy@example.com>
---
 packages/vue3/src/OvenPlayer.vue | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/packages/vue3/src/OvenPlayer.vue b/packages/vue3/src/OvenPlayer.vue
index c320a64e..cfac64c3 100644
--- a/packages/vue3/src/OvenPlayer.vue
+++ b/packages/vue3/src/OvenPlayer.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, onUpdated } from 'vue';
+import { ref, watch, onMounted, onUnmounted } from 'vue';
 import OvenPlayer from 'ovenplayer';
 
 import type { OvenPlayerConfig, OvenPlayerInstance, OvenPlayerEvents } from 'ovenplayer';
@@ -179,10 +179,14 @@ onMounted(createPlayer);
 
 onUnmounted(removePlayer);
 
-onUpdated(() => {
-  removePlayer();
-  createPlayer();
-});
+watch(
+  () => props.config,
+  () => {
+    removePlayer();
+    createPlayer();
+  },
+  { deep: true }
+);
 </script>
 
 <template>