Sauvegarde de la réponde de la fonction fetchMovies() dans le model Movie et suppression de la ref.

@@ -11,35 +11,37 @@ const { fetchPopularMovies } = useTMDB();
 //#endregion
 
 //#region --Type--.
-interface Movie {
-  id: number;
-  title: string;
-  poster_path: string | null;
-  vote_average: number;
-  release_date: string;
-}
+// interface Movie {
+//   id: number;
+//   title: string;
+//   poster_path: string | null;
+//   vote_average: number;
+//   release_date: string;
+// }
 //#endregion
 
 //#region --Data/refs--.
 const isInitialLoading = ref(true);
 const isLoadingMore = ref(false);
-const movies = ref<Movie[]>([]);
 const currentPage = ref(1);
 const totalPages = ref(0);
 //#endregion
 
+//#region --Computed--.
+const movies = computed(() => {
+  return useRepo(Movie).all();
+});
+//#endregion
+
 //#region --Function--.
-// Fetch popular movies
+/**
+ * Fetch popular movies
+ * @param page
+ */
 const fetchMovies = async (page: number) => {
   try {
     isLoadingMore.value = true;
     const data = await fetchPopularMovies(page);
-
-    if (page === 1) {
-      movies.value = data.results;
-    } else {
-      movies.value = [...movies.value, ...data.results];
-    }
     // Save in Movie model.
     useRepo(Movie).save(data.results);
 
@@ -64,7 +66,7 @@ fetchMovies(1)
     <!-- Loading Skeleton -->
     <skeleton-movies-loader :is-initial-loading="isInitialLoading" :skeleton-number="20" />
     <!-- Liste des films -->
-    <pre>{{ movies }}</pre>
+<!--    <pre>{{ movies }}</pre>-->
   </section>
 </template>