Fix the issue where the content was not refresh when navigating between creators

src/views/contents/ContentList.vue

@@ -1,13 +1,12 @@
 <template>
 
   <v-infinite-scroll :items="contents"
-                     :onLoad="load">
+                     :onLoad="fetchContents">
 
     <template v-for="content in contents">
-      <ContentCard :content="content"
-                   class="w-full p-2 my-2"
-      >
-      </ContentCard>
+      <content-card :content="content"
+                    class="w-full p-2 my-2"
+      ></content-card>
     </template>
 
     <template v-slot:empty>
@@ -20,14 +19,12 @@
 
   </v-infinite-scroll>
 
-  <p class="bg-orange">test</p>
-
 </template>
 
 <script setup>
 
 import {useClient} from '@/plugins/api.js';
-import {ref} from 'vue';
+import {ref, watch} from 'vue';
 import ContentCard from "./ContentCard.vue";
 
 const props = defineProps({
@@ -43,7 +40,23 @@ const page_size = 10
 const errorMessage = ref()
 let last_id = null
 
-async function load({done}) {
+const creatorIdWatcher = watch(
+    () => props.creatorId,
+    (newCreatorId) => {
+      if (newCreatorId) {
+        // Reset contents and last_id when the creatorId changes
+        contents.value = [];
+        last_id = null;
+        // Fetch contents for the new creator
+        fetchContents({
+          done: () => {
+          }
+        });
+      }
+    },
+    {immediate: true})
+
+async function fetchContents({done}) {
   try {
     let uri = `/api/contents/creator/${props.creatorId}?page_size=${page_size}`
     if (last_id !== null) uri = uri + `&last_id=${last_id}`