Selecting value in nested array in VueJS

I'm trying to select a value of an object in a nested array. Data being returned from the API looks like this

[
   {
      "id":1,
      "data":value,
      "posts":[
         {
            "data":value,
            "user":{
               "data":value
            }
         }
      ]
   },
   {
      "id":2,
      "data":value,
      "posts":[
         {
            "data":value,
            "user":{
               "data":value
            }
         }
      ]
   }
]

And my HTML looks like this (items represents what was received from API, fetched by an appropriate method)

<my-component v-for="item in items" :key="post.id">
 {{ item.posts[0].user.data }}
</my-component>

Page data

data: () => ({
        items: []
    }),
beforeRouteUpdate (to, from, next) {
    this.search(to.params.query)
    next()
},
methods: {
   search() {
      // search stuff then response recieved thanks to Axios
      this.items = response.data
    }
}

Component data

<template>
  <div class="card facebook-card">
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'my-component'
}
</script>

Returns an error because saying the value is null. I tried to console log the data in the output - it also returned null, but item.posts[0] returns as expected. What's going on here? How do I access the sub array properties?