fix: correctly update displayed repos after fetch

content/.vuepress/components/LatestRepositories.vue

@@ -1,13 +1,14 @@
 <template>
-  <div v-if="error">
+  <div v-if="githubRepos && githubRepos.length > 0">
-    {{ error }}
+    <div v-for="repo in githubRepos">
-  </div>
+      <p>{{ repo.name }} updated at {{ repo.updated_at }}</p>
-  <div v-else v-for="repo in githubRepos">
+    </div>
-    <p>{{ repo.name }} updated at {{ repo.updated_at }}</p>
   </div>
+  <p v-else>Erreur: {{ error }}</p>
 </template>
 
 <script setup lang="ts">
+import { ref, Ref } from 'vue';
 import { readFromCache } from '../composables/cache';
 import {
   GithubError,
@@ -15,20 +16,21 @@ import {
   getLatestRepositories,
 } from '../composables/github';
 
-let githubRepos: GithubRepo[] | null = null;
+let githubRepos: Ref<GithubRepo[]> = ref(null);
-let error: GithubError | null;
+let error: Ref<GithubError> = ref(null);
 const getRepositories = () => {
   return getLatestRepositories('phundrak', 5);
 };
 
 readFromCache<GithubRepo[]>('latestRepos', getRepositories).subscribe({
   next: (repos: GithubRepo[]) => {
-    githubRepos = repos;
+    console.log('Received repos:', repos);
-    error = null;
+    githubRepos.value = repos;
+    error.value = null;
   },
   error: (errorResponse: GithubError) => {
-    githubRepos = null;
+    githubRepos.value = null;
-    error = errorResponse;
+    error.value = errorResponse;
   },
 });
 </script>