Use set

src/components/player/controls/SeekControl.vue

@@ -23,6 +23,7 @@
 </template>
 
 <script lang="ts">
+import { set } from '@vueuse/core';
 import { dom, QSlider } from 'quasar';
 import { usePlayer } from 'src/composables/usePlayer';
 import { computed, defineAsyncComponent, defineComponent, ref } from 'vue';
@@ -43,13 +44,8 @@ export default defineComponent({
     const seekerOffset = computed(() => dom.offset(<Element>slider.value?.$el).left);
     const seekerWidth = computed(() => dom.width(<Element>slider.value?.$el));
 
-    const onMouseHover = (event: MouseEvent) => {
-      seeker.value = event.clientX;
-    };
-
-    const onMouseLeave = () => {
-      seeker.value = undefined;
-    };
+    const onMouseHover = (event: MouseEvent) => set(seeker, event.clientX);
+    const onMouseLeave = () => set(seeker, undefined);
 
     const setCurrentTime = (payload: number | null) => player.value?.seek(payload || 0);
 

src/components/player/controls/TooltipControl.vue

@@ -19,6 +19,7 @@
 </template>
 
 <script lang="ts">
+import { set } from '@vueuse/core';
 import { clamp, debounce } from 'lodash';
 import { usePlayer } from 'src/composables/usePlayer';
 import { timeFormat } from 'src/helpers';
@@ -64,9 +65,7 @@ export default defineComponent({
         reader.readAsDataURL(data.value);
       }
 
-      reader.onload = () => {
-        uri.value = reader.result?.toString() || '';
-      };
+      reader.onload = () => set(uri, reader.result?.toString() || '');
     };
 
     watch(percent, debounce(render, 25));

src/composables/usePlayer.ts

@@ -1,3 +1,4 @@
+import { set } from '@vueuse/core';
 import { Event, MediaPlayerClass } from 'dashjs';
 import { PlayerState, PlayerTrack, VideoModel } from 'src/interfaces';
 import { getToken } from 'src/services/auth';
@@ -42,7 +43,7 @@ export const usePlayer = () => {
     const token = getToken();
 
     // Initialize player
-    player.value = create(model?.dash_url || '', token || '', view);
+    set(player, create(model?.dash_url || '', token || '', view));
 
     addListeners(player.value, handler);
 

src/layouts/AppLayout.vue

@@ -50,9 +50,10 @@
 </template>
 
 <script lang="ts">
+import { tryOnBeforeUnmount, tryOnMounted } from '@vueuse/core';
 import { useQuasar } from 'quasar';
 import { useSession } from 'src/composables/useSession';
-import { computed, defineAsyncComponent, defineComponent, onBeforeUnmount, onMounted } from 'vue';
+import { computed, defineAsyncComponent, defineComponent } from 'vue';
 
 const tagsComponent = defineAsyncComponent(() => import('components/tags/TagDialog.vue'));
 const videosComponent = defineAsyncComponent(() => import('src/components/search/SearchDialog.vue'));
@@ -69,8 +70,8 @@ export default defineComponent({
     const tagsDialog = () => $q.dialog({ component: tagsComponent });
     const videosDialog = () => $q.dialog({ component: videosComponent });
 
-    onBeforeUnmount(() => unsubscribe());
-    onMounted(() => subscribe());
+    tryOnBeforeUnmount(() => unsubscribe());
+    tryOnMounted(() => subscribe(), true);
 
     return {
       sessionKey,