Nuxt.js + ExpressにおいてExpress側からクエリパラメータが取得できない

Question

やろうとしていること

フロントエンドにNuxt.js、バックエンドにExpressを用いたWebアプリを開発中です。データ通信の手段はAxiosを使っています。
Express側でクエリパラメータを取得してNuxt.js側に送信・表示しているのですが表示されません。どなたか分かる方がいらっしゃれば教えて頂ければ幸いです。
アクセスしているURLはhttp://localhost:3000/?name=aiueoです。

コード

Express側

const express = require('express')
const app = express()
app.use(express.json())

app.get('/', (req, res) => {
  named = req.query.name
  db.Reflection.findAll().then(rfs => {
    const data = {
      rfs: rfs,
      query: named,
    }
    res.send(data)
  })
})

Nuxt.js側

<template>
  <div>
    {{ $route.query.name }}
    {{ data.rfs }}
    {{ data.query }}
  </div>
</template>

<script>
export default {
  async asyncData({ $axios }) {
    const res = await $axios.$get("/api");
    return {
      data: res,
    };
  },
};
</script>

現在できていること

• Nuxt.js側でのクエリパラメータ取得

あんまり関係ないかも知れませんが{{ $route.query.name }}でNuxt.js側からはクエリパラメータが取得できています

• ExpressとNuxt.js間の通信

下のqueryの部分を適当な文字列に変えると画面にその文字が表示されるので通信は成功しています。おそらくExpress側からクエリパラメータが取得できていないです。

    const data = {
      rfs: rfs,
      query: named,
    }

Answer 1

アクセスしているURLはhttp://localhost:3000/?name=aiueoです。

とのことですが、これは、ブラウザのアドレスバーからの入力でしょうか。

一方で、コード中の axios 側の呼び出しは、const res = await $axios.$get("/api"); なので、axis からは http://localhost:3000/api というリクエストになっているような気がします。（リクエストパラーメーターは無し）

このあたりご想定の動きでしょうか？

アクセスログやブラウザの通信（開発者ツール）で確認すると良いのではないでしょうか。