Nuxt.jsでheadにasyncDataの値を入れたい

hoge.vue

<script>
export default {
  async asyncData({ route, app, store, payload }) {
      return {
        title: payload.title.rendered
      }
    }
  },
  head: {
    title: this.title
  },

これではTypeError: Cannot read property 'title' of undefinedとなり失敗してしまう。

  head() {
    return { title: this.title }
  },

これで設定できた。headメソッドを使うことでコンポーネント内のデータにthisでアクセスできるようになる。nuxt.config.jsでメタ情報を設定するときと同じようにhead: { ...と書いてしまったのが失敗した原因のようだった。

参考：API: head メソッド - NuxtJS