Problem with loop (v-for)

Speak Devs!

I'm new to this world and I'm catching up with something I think is simple. I'm using the API-Rest of Wordpress and I'm picking up the posts, I want to bring one by ID, theoretically everything's okay, because I already did with another API that was in Node, but here instead of just bringing one post, all behind. Where am I going wrong?

So there's the loop:

   <template> 
   <div v-for="post in posts" :key="post.id">
      <article v-bind:id="'post-' + post.id">
        <div>{{ post.id }}</div>
        <h1>{{ post.title.rendered }}</h1>
        <div v-html="post.content.rendered"></div>
        <a :href="post.link">{{ post.title.rendered }}</a>
      </article>
    </div>
   </template>

And the script:

<script>
import axios from 'axios'

export default {
name: 'app',
data () {
  return {
    posts: null,
    id: this.$route.params.id
   }
},

mounted(){
  axios.get('posts/', + this.id)
  .then(response => {this.posts = response.data})
  .catch(e => {console.log('erro post')})
  }
}

Thanks in advance for your help !!