Grudsomeでmetadataを設定すると TypeError: Cannot read property '$page' of undefined. が発生する

概要

metadataがページに依存するように最適化を行おうとした
templates内に設定したmetadataが読み込まれなかった

状況

BlogPost.vue

<script>
export default {
  metaInfo: {
    title: this.$page.blogPost.title,
    metaInfo: {
      meta: [
        {
          property: "og:site_name",
          content: "Gridsome OGP テスト",
        },
        {
          property: "og:type",
          content: "website",
        },
        {
          property: "og:url",
          content: "https://sample.com/Blog/",
        },
        {
          property: "og:title",
          content: this.$page.blogPost.title,
        },
        {
          property: "og:description",
          content: this.$page.blogPost.content,
        },
        {
          property: "og:image",
          content: "https://sample.com/sample.jpg",
        },
        {
          name: "twitter:card",
          content: "summary_large_image",
        },
      ],
    },
  },
};
</script>

ビルドは正常に行われるがブラウザから確認すると表示されず、また開発者ツールから確認すると下記のエラーが吐かれている

TypeError: Cannot read property '$page' of undefined

対応

BlogPost.vue

<script>
export default {
  metaInfo() {
    return {
      title: this.$page.blogPost.title,
      metaInfo: {
        meta: [
          {
            property: "og:site_name",
            content: "Gridsome OGP テスト",
          },
          {
            property: "og:type",
            content: "website",
          },
          {
            property: "og:url",
            content: "https://sample.com/Blog/",
          },
          {
            property: "og:title",
            content: this.$page.blogPost.title,
          },
          {
            property: "og:description",
            content: this.$page.blogPost.content,
          },
          {
            property: "og:image",
            content: "https://sample.com/sample.jpg",
          },
          {
            name: "twitter:card",
            content: "summary_large_image",
          },
        ],
      },
    };
  },
};
</script>

moreInfoを関数に各値をreturnで括ることでエラーがなくなりました

まだ触り始めたばかりなので正直なぜこれで大丈夫なのかがわかりません……

参考

Gridsomeでイチからブログを作る - metaタグやOGPを最適化する