Nuxt Content not loading with NuxtLink

Invalid prop: type check failed for prop "value". Expected Object, got Null 

<script setup lang="ts">
const { data: posts } = await useAsyncData("blog", () =>
  queryCollection("blog").all()
);
</script>

<template>
  <div>
    <h1>Blogs:</h1>
    <ul>
      <li v-for="post in posts" :key="post.id">
        {{ post.path }}
        <NuxtLink :to="post.path">{{ post.title }}</NuxtLink>
      </li>
    </ul>
  </div>
</template>

<script lang="ts" setup>
const route = useRoute();
const { data: blog } = await useAsyncData(route.path, () => {
  return queryCollection("blog").path(route.path).first();
});
</script>

<template>
  <!-- Render the blog post as Prose & Vue components -->
  <ContentRenderer v-if="blog" :value="blog" />
</template>