Отображение объектов в массиве VueJS

Поэтому я использую объект JSON который выглядит примерно так:

data: [
  {
    title: "Post Title One",
    categories: {
      data: [
        {
          id: 1,
          name: "Category Name 1"
        }
      ]
    }
  },
  {
    title: "Post Title Two",
    categories: {
      data: [
        {
          id: 2,
          name: "Category Name 1"
        },
        {
          id: 3,
          name: "Category Name 2"
        }
      ]
    }
  }
]

и я хочу захватить все категории для каждого сообщения и отобразить их с помощью Vue. Итак, у меня есть:

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

В этом {{ post.categories.data }} я пытаюсь отобразить имя категории из объекта JSON. Когда я использую то, что у меня выше, весь массив отображается в div. Когда я пытаюсь сделать что-то вроде

{{ post.categories.data.name }} 

или же

{{ post.categories.data[0].name }}

Я не показываю название категории. Я действительно хотел бы отобразить имя каждой категории, которую имеет почта, но, похоже, не может отобразить ее правильно.

EDIT: Также сообщения - это свойство данных, которое я использую в VueJS и я устанавливаю объект JSON в качестве этого свойства.