How to address such an answer?

Question

JavaScript

I have this api answer

[
    {
        "id": 1,
        "category_name": "porro",
        "created_at": "2022-04-02T21:29:52.000000Z",
        "updated_at": "2022-04-02T21:29:52.000000Z",
        "posts": [
            {
                "id": 2,
                "title": "Culpa quis praesentium.",
                "description": "Repudiandae distinctio qui quia natus tempora ullam culpa totam.",
                "image": null,
                "created_at": "2022-04-02T21:29:52.000000Z",
                "updated_at": "2022-04-02T21:29:52.000000Z",
                "pivot": {
                    "categories_id": 1,
                    "posts_id": 2
                }
            }, ....

Through such a cycle

<div v-for="post in posts">
        {{ post.category_name }}
        <br>
    </div>

I can get category_name. But how can one turn to the insides

posts:

for example, get the title?
I have tried loops like this
1)

<div v-for="post in posts.posts">
        {{ post.title }}
        <br>
    </div>

2)

<div v-for="post in posts.posts.data">
        {{ post.title }}
        <br>
    </div>

3)

<div v-for="post in posts['posts']">
        {{ post.title }}
        <br>
    </div>

But I can't get the insides of the posts

Answer 1

either v-for="post in posts[0].posts" if it so happened that all the posts are inside, and outside there is one object in the array, or v-for="post in posts" and inside v-for=" post in post.posts" it's
better to rename something like this so there's no confusion