Fix fetching

src/components/PostsHome.vue

@@ -30,13 +30,23 @@
 </template>
 
 <script lang="ts">
-import {defineComponent} from "@nuxtjs/composition-api";
+import {defineComponent, useAsync, useContext} from "@nuxtjs/composition-api";
+import {Post} from "../../@types/types";
 
 export default defineComponent({
   name: "PostsHome",
-  props: {
-    posts: {
-      default: () => [],
+  setup() {
+    const { $content, i18n } = useContext()
+
+    const posts = useAsync(() => {
+      return $content(`articles/${i18n.locale}`)
+        .sortBy('date', 'asc')
+        .limit(3)
+        .fetch<Post>()
+    }, 'posts')
+
+    return {
+      posts
     }
   }
 })

src/components/ProjectsHome.vue

@@ -28,13 +28,22 @@
 </template>
 
 <script lang="ts">
-import {defineComponent} from "@nuxtjs/composition-api";
+import {defineComponent, useAsync, useContext} from "@nuxtjs/composition-api";
+import {Project} from "../../@types/types";
 
 export default defineComponent({
   name: "ProjectsHome",
-  props: {
-    projects: {
-      default: () => [],
+  setup() {
+    const { $content } = useContext()
+
+    const projects = useAsync(() => {
+      return $content(`projects`)
+        .limit(3)
+        .fetch<Project>()
+    }, 'projects')
+
+    return {
+      projects
     }
   }
 })

src/pages/index.vue

@@ -2,8 +2,8 @@
   <main>
     <Banner />
     <AboutHome />
-    <PostsHome :posts="posts"/>
-    <ProjectsHome :projects="projects"/>
+    <PostsHome />
+    <ProjectsHome />
     <AdHome />
   </main>
 </template>
@@ -18,27 +18,6 @@ export default Vue.extend({
     return {
       title: 'Arthur Danjou - FullStack Web & Software Developer'
     }
-  },
-  setup() {
-    const { $content, i18n } = useContext()
-
-    const projects = useAsync(() => {
-      return $content(`projects`)
-        .limit(3)
-        .fetch<Project>()
-    })
-
-    const posts = useAsync(() => {
-      return $content(`articles/${i18n.locale}`)
-        .sortBy('date', 'asc')
-        .limit(3)
-        .fetch<Post>()
-    })
-
-    return {
-      posts,
-      projects
-    }
   }
 })
 </script>