NuxtJS + Graphql - Everything was well but the post title does not shows up in Template

Question

With Nuxt + Strapi + Graphql, I'm trying to show the post title here and below is my code. No error and everything was well but the post title just didn't show up.
If you look at the Graphql query below, I managed to pull out all those post information in Playground.

Any idea what went wrong? How should I access the object?

<template>
  <div>
    <div v-for="post in posts" :key="post.slug">
      <h1>{{ post.title }}</h1>
    </div>
  </div>
</template>

<script>
import { postQuery } from '~/graphql/query'

export default {
  data() {
    return {
      posts: [],
    }
  },
  apollo: {
    posts: {
      prefetch: true,
      query: postQuery,
    },
  },
}
</script>

import gql from 'graphql-tag';

export const postQuery = gql`
  query postQuery {
    posts {
      data {
        attributes {
          Title
          DateTime
          Content
          IsAlgoAvailable
          Slug
          publishedAt
        }
      }
    }
  }
`

Below Graphql query looking good

{
  "data": {
    "posts": {
      "data": [
        {
          "attributes": {
            "Title": "First Post Hello World",
            "DateTime": "2022-10-02T16:02:00.000Z",
            "Content": "First Hello World Content",
            "Slug": "enter-title-here",
            "publishedAt": "2022-10-03T13:20:47.359Z"
          }
        },
        {
          "attributes": {
            "Title": "2nd Post",
            "DateTime": "2022-10-02T16:01:00.000Z",
            "Content": "Enter Content Here...",
            "Slug": "2nd-post",
            "publishedAt": "2022-10-03T14:34:44.140Z"
          }
        }
      ]
    }
  }
}

Answer 1

Since the data had a data.posts.data kind of structure, you need to loop on it like

v-for="post in posts.data"