Nuxt.jsとMicrocmsとNetlifyを使った記事の検索フォームの作成でエラーになる

Nuxt.jsとNetlifyとMicrocmsで作ったブログサイトに検索フォームを実装したいのですがhttps://qlitre-weblog.com/nuxt-microcms-keyword-search/の記事しかなかったのでこの内容で実装したのですがエラーになります。
エラーは「Cannot read property 'get' of undefined」でこのエラー内容で調べたらnuxt.config.jsに↓のコードを追加すればいいというのを見て試したのですがダメでした。

modules: [
    '@nuxtjs/axios'
  ],

エラー画面は↓です。

pages/index.vueに↓のコードを書きました。
「xxxxxxxxxxxxxxxxxxxx」と書いている部分はダミーにしています。

<template>
    <div>
        <Header/>
        <div class="l-top-main">
            <div>
                <ul class="l-top-main__articles">
                    <li 
                        v-for="(content,contentIndex) in contents"
                        :key="content.id"
                    >
                        <nuxt-link :to="`/blog/${content.id}`">
                            <div
                                class="l-top-main__articles-wrap1"
                                v-if="contentIndex % 2 == 0"
                            >
                                <img 
                                    class="l-top-main__articles-img"
                                    :src="content.eyecatch.url" alt=""
                                >
                                <div class="l-top-main__articles-field">
                                    <h2 class="l-top-main__articles-title">{{content.title}}</h2>
                                    <div>
                                        <time 
                                        class="l-top-main__articles-date"
                                        :datetime="content.published" 
                                        v-text="$dateFns.format(new Date(content.published),'yyyy年MM月dd日')"
                                        />  
                                        <span>|</span>
                                        <span class="l-top-main__articles-tag">{{content.tag}}</span>
                                    </div>   
                                </div>
                            </div>
                        </nuxt-link>
                        <nuxt-link :to="`/blog/${content.id}`">
                            <div
                                class="l-top-main__articles-wrap2"
                                v-if="contentIndex % 2 == 1"
                            >
                                <div class="l-top-main__articles-field">
                                    <h2 class="l-top-main__articles-title">{{content.title}}</h2>
                                    <div>
                                        <time 
                                        class="l-top-main__articles-date"
                                        :datetime="content.published" 
                                        v-text="$dateFns.format(new Date(content.published),'yyyy年MM月dd日')"
                                        />     
                                        <span>|</span>
                                        <span class="l-top-main__articles-tag">{{content.tag}}</span>
                                    </div>   
                                </div>
                                <img 
                                    class="l-top-main__articles-img"
                                    :src="content.eyecatch.url" alt=""
                                >
                            </div>
                        </nuxt-link>
                    </li>
                </ul>
                <nuxt-link 
                    to="/archive"
                    class="l-top-main__archive"
                >全ての記事を見る</nuxt-link>
            </div>
            <div class="l-top-main__sidebar">
                <div class="l-top-main__recently-article">
                    <h2 class="l-top-main__recently-article-title">最近の記事</h2>
                    <ul>
                        <li 
                        v-for="content in contents"
                        :key="content.id"
                        >{{content.title}}</li>
                    </ul>
                    <nuxt-link 
                        to="/archive" 
                        class="l-top-main__recently-archive"
                    >一覧を見る</nuxt-link>
                </div>
                <div class="l-top-main__search">
                    <h2 class="l-top-main__search-title">検索</h2>
                </div>
            </div>
        </div>
        <Footer/>
    </div>
</template>

<script>
import axios from "axios";

export default{
    data:function(){
        return{
         contents:[]
            
        }
    },
    async asyncData({
        $microcms,
        params
    }) {
        const { datas } = await axios.get(
            "https:xxxxxxxxxxxxxxxxxxxx",
            {
                headers: { "X-MICROCMS-API-KEY": "xxxxxxxxxxxxxxxxxxxx" }
            }
        );
        const limit = 10
        const page = params.p || '1'
        const data = await $microcms.get({
        endpoint: 'post',
        queries: {
            limit: limit,
            offset: (`${page - 1}`) * limit
        }
        })
        const numPages = Math.ceil(data.totalCount / limit);
        const current = params.p == undefined ? 1 : Number(params.p)
        // console.log(data)
        return {
            posts: data.contents,
            numPages,
            current,
            datas
        };
    },
}

コードをどう変えればエラーがなくなるのでしょうか？
ネットであまりに情報がなくて自分で解決できないため質問しました。