Do not cache state

src/components/video/VideoSimilar.vue

@@ -36,7 +36,7 @@
 <script lang="ts">
 import { useSimilar } from 'src/composables/useSimilar';
 import { useVideo } from 'src/composables/useVideo';
-import { defineAsyncComponent, defineComponent, onBeforeMount, watch } from 'vue';
+import { defineAsyncComponent, defineComponent, watch } from 'vue';
 
 export default defineComponent({
   name: 'VideoSimilar',
@@ -65,8 +65,7 @@ export default defineComponent({
       done();
     };
 
-    onBeforeMount(() => reset());
-    watch(() => video.data, () => reset(), { deep: true });
+    watch(() => video.data, () => reset(), { deep: true, immediate: true });
 
     return {
       onLoad,

src/composables/useSimilar.ts

@@ -3,16 +3,16 @@ import { Model, RepositoryLinks, RepositoryMeta, VideosFilters, VideosResponse,
 import { api, uri } from 'src/services/api';
 import { reactive } from 'vue';
 
-const state = reactive(<VideosState>{
-  id: null,
-  data: [],
-  meta: undefined,
-  links: undefined,
-  error: undefined,
-  filters: undefined,
-});
-
 export const useSimilar = () => {
+  const state = reactive(<VideosState>{
+    id: null,
+    data: [],
+    meta: undefined,
+    links: undefined,
+    error: undefined,
+    filters: undefined,
+  });
+
   const update = (payload: VideosResponse | null) => {
     state.data = state.data.concat(payload?.data || []);
     state.meta = { ...state.meta, ...<RepositoryMeta>payload?.meta };