title: Vuex action "not a function" inside Nuxt fetch
body: <p>I have just introduced error handling to one of my Nuxt pages and apparently the action mapped and called inside <code>fetch</code> raises a <em>not a function</em> error. If the <code>try</code>/<code>catch</code> block isn't there it works as expected and there's no error at all.</p>
  <p>Here is my component stripped to the essential parts:</p>
  <pre class="lang-js prettyprint-override"><code>export default {
    name: 'ViewArticle',
    async fetch ({ error }) {
      try {
        await this.fetchArticle({ articleSlug: this.articleSlug })
      } catch (err) {
        error({ statusCode: 404, message: 'May the force be with you' })
      }
    },
    computed: {
      ...mapGetters({
        article: 'article/single'
      }),
      articleSlug () {
        return this.$route.params.articleSlug
      }
    },
    methods: {
      ...mapActions({
        fetchArticle: 'article/fetchOne'
      })
    }
  }
  </code></pre>
  <p>I am assuming that somehow mapActions only gets executed later in the spiel, but can't figure out how to prevent the error. This way, basically every time I load the page it gets immediately redirected to the error page.</p>
  <p>The error message I'm getting is the following. Obviously <code>fetchArticle</code> <em>is</em> a function, and unless it's inside the <code>try</code>/<code>catch</code> block, it works as expected.</p>
  <pre><code>this.fetchArticle is not a function                                                                                                               03:30:51
  
    at Object.fetch (52.js:32:18)
    at server.js:2881:39
    at Array.map (&lt;anonymous&gt;)
    at module.exports../.nuxt/server.js.__webpack_exports__.default (server.js:2864:51)
  </code></pre>