Nuxt.js + mircoCMS でカテゴリー一覧をコンポーネントで表示させたい

前提・実現したいこと

Nuxt.js + mircoCMS + Netlify でブログを作りたいと思っています。
記事を取得したり表示させるところはできています。
カテゴリーを取得して、カテゴリー一覧を表示させるcomponentを作りたいのですが、
storeを使ってもうまくいかず…色々検索してみたのですが、全然解決されません。

どこか記述がおかしいところがあるのか、アドバイスいただけると嬉しいです。
よろしくお願いいたします。

該当のソースコード

■component/_category.vue

vue
1<template>
2  <div class="subnav">
3    <div class="wrap">
4      <div v-for="item in categories" :key="item.id">
5        <p>{{item.slug}}</p>
6      </div>
7    </div>
8  </div>
9</template>
10
11<script>
12import { mapGetters } from "vuex";
13import axios from "axios";
14
15export default {
16  async asyncData({ store }) {
17    await this.$store.dispatch("fetchCategories");
18  },
19  computed: {
20    ...mapGetters(["categories"])
21  }
22};
23</script>

■store/index.js

vue
1import Vuex from 'vuex'
2import axios from 'axios'
3
4
5const store = () => new Vuex.Store({
6  state: {
7    categories: [],
8  },
9  getters: {
10    categories: (state) => state.cateogries
11  },
12  mutations: {
13    setCategories(state, { categories }) {
14      state.categories = categories
15    }
16  },
17  actions: {
18    async fetchCategories({ commit }) {
19      await axios.get(process.env.API_URL + 'category/',
20        {
21          headers: { "X-API-KEY": process.env.API_KEY }
22        }).then((res) => {
23          console.log(res);
24          commit('setCategories', { categories: res.data.contents })
25        })
26    }
27  }
28
29})
30
31export default store
32