title: How to await for the post data before the page meta head property in Nuxt?
body: <p>I'm using Nuxt SSR to dynamically inject the <a href="https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-head" rel="nofollow noreferrer">head property</a> to set page level meta data. The data is fetching from Firebase. I'm getting property undefined because it doesn't wait for the post data finish loading. How do I wait for the post data before the head property?</p>
  <pre><code>client.js?16a3:97 TypeError: Cannot read property 'post' of undefined
  </code></pre>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// page\:post.vue
  &lt;script&gt;
  import { mapState, mapActions } from 'vuex'
  export default {
    fetch() {
      this.fetchPost()
    },
    computed: {
      ...mapState('posts', ['post']),
    },
    methods: {
      ...mapActions('posts', ['fetchPost']),
    },
    head: {
      title: this.post.title,
      link: [{ rel: 'canonical', href: this.post.canonical }],
      meta: [
        { hid: 'name', itemprop: 'name', content: this.post.title },
        {
          hid: 'description',
          itemprop: 'description',
          content: this.post.content,
        },
      ],
    },
  }
  &lt;/script&gt;
  
  // store\posts.js
  export const state = () =&gt; ({
    post: null,
  })
  export const mutations = {
    setPost(state, payload) {
      state.post = payload
    },
  }
  export const actions = {
    async fetchPost({ commit }, key) {
      const doc = await postsCollection.doc(key).get()
      if (doc.exists) commit('setPost', doc.dat())
    },
  }</code></pre>
  </div>
  </div>
  </p>