microCMSで取得したデータを参照して表示すると"undefined"になる

国産のヘッドレスCMS「microCMS」を使うときに、APIを叩いて取得したデータ（今回の場合個別の記事）を表示しようとすると"undefined"と怒られてしまうことがありました。

そのときのコードがこちら。テンプレートで、取得した記事のタイトルを表示させようとしています。

<template>
  <div class="container">
        <h2 class="title">{{ post.title }}</h2>
  </div>
</template>

<script>

export default {
  data() {
    return {
      post: null
    }
  },
  mounted() {
    this.fetchArticle()
  },
  methods: {
    // 個別の記事を取得
    fetchArticle() {
      axios
        .get(
          'https://shimotsu-test.microcms.io/api/v1/shimotsutest/' +
            this.$route.params.slug,
          {
            headers: { 'X-API-KEY': process.env.API_KEY }
          }
        )
        .then((res) => {
          this.post = res.data
        })
        .catch((err) => {
          console.log(err)
        })
    },
  }
}
</script>

これで、取得した記事データpostからタイトルを抜き出して表示できるかと思ったのですが、titleがundefinedになるエラーが発生。

しばらく悩んでいたのですが、以下の方法で解決できました。

<template>
  <div class="container">
        <h2 class="title">{{ post.title }}</h2>
  </div>
</template>

<script>

export default {
  data() {
    return {
      post: {
        // 追記
        title: null
     }
    }
  },
  mounted() {
    this.fetchArticle()
  },
  methods: {
    // 個別の記事を取得
    fetchArticle() {
      axios
        .get(
          'https://shimotsu-test.microcms.io/api/v1/shimotsutest/' +
            this.$route.params.slug,
          {
            headers: { 'X-API-KEY': process.env.API_KEY }
          }
        )
        .then((res) => {
          this.post = res.data
        })
        .catch((err) => {
          console.log(err)
        })
    },
  }
}
</script>

返ってくるデータはpostというオブジェクトに格納していたのですが、そこで使用するtitleプロパティを定義する必要があるみたいです（初期値としてnull）。
タイトルの他に、たとえば本文（body）を使いたいときは `body: null` として個別に定義していきます。

`this.post = res.data` の部分でpostにすべてのデータが格納されているので、そこからは好きに抜き出して使えると思っていたのですが、それだとちょっと問題があるようです。