Nuxt.js/JAMstackサイトのルーティングで401エラーが発生します。

Nuxt.jsを利用したJAMstack構成のサイト作成をしています。
下記の記事などを参考に記事一覧、記事詳細ページの作成をしていたところ401エラーが発生してしまいました。
https://blog.microcms.io/microcms-nuxt-jamstack-blog/
(「4. ブログ詳細を表示する」辺りまで)

参考記事と違い、

page
∟index.vue
∟blogs/
    ∟index.vue
    ∟_slug/
      ∟index.vue

というようなページ構成にしたところ、遷移URLは「http://localhost:3000/blogs/blog_id」のように期待した通りのURLが生成されるのですが、アクセス時に401エラーとなってしまいます。
そのままページリロードを行うと、今度は正しいコンテンツが表示されるような状態です。
nuxt.config.jsのrouter項目は今のところ何も記述していません。
下記が_slugディレクトリのindex.vueファイル内容になります。

<template>
    <div class="container">
        <base-main-visual />
        <h1 class="title">{{ title }}</h1>
        <p class="publishedAt">{{ publishedAt }}</p>
        <div class="post" v-html="content"></div>
    </div>
</template>

<script>
import axios from 'axios'

export default {
  async asyncData({ params, $config }) {
    const { data } = await axios.get(
      `${$config.apiUrl}/blog/${params.slug}`,
      {
        headers: { 'X-API-KEY': $config.apiKey }
      }
    )
    return data
  }
}
</script>

これまで.envに記載したエンドポイントURLとKEYを環境変数として読み込んでいたのですが、ここを直書きすると事態は改善されることに気づきました。
ただこの方法だとエンドポイントURLとKEYをだれでも見ることができるので好ましくないという話も聞き、解決できていません。

<template>
　~~~~略~~~~
</template>

<script>
import axios from 'axios'

export default {
  async asyncData({ params, $config }) {
    const { data } = await axios.get(
      `https://your-service-id.microcms.io/api/v1/blog/${params.slug}`,
      {
        headers: { 'X-API-KEY': 'your-api-key' }
      }
    )
    return data
  }
}
</script>

解決方法を教えていただけるとありがたいです。
よろしくお願いいたします。

===追記===
もともと別の資料を参考にしていたため、今回参考にしたサイトと若干記述が違う部分があるので確認のためにも追記。
上が問題なく稼働している他ページでのasyncDataの記述。

<script>
  async asyncData({ $config }) {
    const blog = await axios.get(
      `${$config.apiUrl}/blog`,
      {
        headers: { 'X-API-KEY': $config.apiKey },
      }
    )
    return {
      blogItems: blog.data,
    }
  },
</script>

今回の参考サイトを既存コードと合わせるような形に変更。
この際Vueのデベロッパーツールで確認するとblogItemsがundifinedなので、asyncDataの引数指定記述などに問題がある可能性。
ただエラーは出ていない。
初回表示は401エラー、ページリロードするとコンテンツが表示される。

<script>
  async asyncData({ params, $config }) {
    const blog = await axios.get(
      `${$config.apiUrl}/blog/${params.slug}`,
      {
        headers: { 'X-API-KEY': $config.apiKey },  
      }
    )
    return {
      blogItems: blog.data,
    }
  },
</script>

こうすると問題なく動く。

<script>
  async asyncData({ params }) {
    const blog = await axios.get(
      `https://your-service-id.microcms.io/api/v1/blog//blog/${params.slug}`,
      {
        headers: { 'X-API-KEY': 'your-api-key' },  
      }
    )
    return {
      blogItems: blog.data,
    }
  },
</script>