Property "posts" was accessed during render but is not defined on instance

[AbhimanyuAryan]

hey I am trying to add markdown on my deep-learning pages

https://github.com/abhimanyuaryan/abhimanyuaryan.github.io

but it doesn't render posts giving me this error

[Vue warn]: Property "posts" was accessed during render but is not defined on instance.
[Vue warn]: Property "posts" was accessed during render but is not defined on instance.
[Vue warn]: Property "posts" was accessed during render but is not defined on instance.
[Vue warn]: Property "posts" was accessed during render but is not defined on instance.

can anyone guide me what's wrong? It's a fresh project

so my markdown files are in content/deep-learning/post1.md

pages/deep-learning.vue

<template>
  <div>
    <h1>Deep Learning Posts</h1>
    <ul>
      <li v-for="post in posts" :key="post.slug">
        <nuxt-link :to="`/deep-learning/${post.slug}`">{{
          post.title
        }}</nuxt-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  async asyncData({ $content }) {
    console.log("Fetching posts...");
    const posts = await $content("deep-learning").fetch();
    console.log("Posts:", posts);
    return {
      posts,
    };
  },
};
</script>

and pages/deep-learning/_slug.vue

<template>
  <div>
    <h1>{{ post.title }}</h1>
    <nuxt-content :document="post" />
  </div>
</template>

<script>
export default {
  async asyncData({ $content, params }) {
    const post = await $content("deep-learning", params.slug).fetch();
    return {
      post,
    };
  },
};
</script>

[AbhimanyuAryan]

I upgrade to new version. I will ask new question