nuxtのAuth Moduleでの認証済み時のリロードで常にログイン画面に遷移してしまう。

Question

NuxtでAuth Moduleを使ってログイン画面を作成しています。
バックエンド（API)側はPHP（php-jwt）で実装し、独自の認証処理を行なっています。

Nuxtの設定、nuxt.config.tsのauthは以下のとおりです。

:
  auth: {
    redirect: {
      login: '/login',
      logout: '/',
      callback: false,
      home: '/'
    },

    strategies: {
      local: {
        endpoints: {
          login: { url: '/auth/login', method: 'post', propertyName: 'token' },
          logout: { url: '/auth/logout', method: 'post' },
          user: { url: '/auth/user', method: 'get', propertyName: 'user' }
        }
      }
    }
  },
:

そしてサンプルに習い、以下のミドルウェアを作成し、対象のページに適用しました。

import { Middleware } from '@nuxt/types';

const userAuth: Middleware = ({ store, redirect }) => {
  if (!store.state.auth.loggedIn) {
    redirect('/login');
  }
};
export default userAuth;

この時、認証済みにおいても画面を更新した際（例えばF5を押した時）、ログインの画面の方へ遷移してしまうのです。
これはendpointsのuser、/auth/userの結果を待たず、先のミドルウェアの方が先に判断しているものと思っています。（$authを表示させたところ、数秒後に表示されるので多分そうだと思います。）

前にVueでSPAを作成したときは以下のような方法を取っていましたが、nuxtにおけるトップ（index）がよくわからなく、ましてやAuthModuleを提供してるくらいなので、もう少し一般的、ベターなやり方があるのではと思い、質問させていただきました次第です。

// index.js
(async () => {
  // これだと認証情報を取得するまで待ってくれる。
  await store.dispatch('auth/currentUser');

  new Vue({
    router,
    store,
    render: h => h(App)
  }).$mount('#app');

})();

$authの...監視をするのだろうか？（それをどこに作る？）
そもそも設定やモジュールの使い方が違う？
それとも・・・
（※Nuxtは初心者です。）

ぜひご教授いただきたく。
よろしくお願いします。

追記）
もう少し状況を補足。

• 認証済みのとき、/（ルート）へアクセス。（あるいはリロード）
• middlewareが働いてstore.state.auth.loggedInが空のため、/loginに遷移する。
• ログイン遷移後、endpointsのuser（/auth/user）が作動する。
• 認証しているので結果が$authには反映されている。

...がそのあと何も動かない。
$authの監視をするためにログイン画面に以下のコードを追記してみたが、拾えず。。。

  computed: {
    loggedIn () {
      return this.$auth.loggedIn;
    }
  },

  watch: {
    loggedIn () {
      alert('変わった！！！');
    }
  }

endpointsのuserのコールバック的なのか必要なのだけど、どのようにすればいいのか。。。

さらに追記）

ログイン画面に$authを表示させたイメージを載せてみました。
URLを叩いたときのログイン画面に移行。最初loggedInがfalseなのがちょっと間を置いてtrueになる感じです。（なのでmiddlewareのそれが先に判定されているものと思っています。）

あと作成したミドルウェアをやめ、標準の書き方（？）を試してみました。
が、これも変わらずです。
何か実装が必要なのでしょうか？

## nuxt.config.ts
:
  router: {
    middleware: ['auth']
  }
:

# pages/index.vue
:
<script lang="ts">
import Vue from 'vue';
import Home from '~/components/templates/Home/index.vue';
export default Vue.extend({
  auth: true,
  :
</script>

引き続き募集します。
よろしくお願いします。

Answer 1

自分の（開発環境）構成の場合、proxyモジュールが必須で、下記のように書くことで正常に稼働しました。
（あとこれは関係ないですが、/auth/...としてたところをAPI側のパスを変更し、/api/auth/...に変更しました。ドキュメントのそれと合わせることにしました。）
従って標準のAuthを使うのであればミドルウェアも書く必要ないようです。

## nuxt.config.ts
  axios: {
    // baseURL: 'http://localhost/'
    proxy: true
  },
  proxy: {
    '/api': {
      target: 'http://localhost',
      pathRewrite: {
        '^/api': '/'
      }
    }
  },

  auth: {
    strategies: {
      local: {
        endpoints: {
          login: { url: '/api/auth/login', method: 'post', propertyName: 'token' },
          logout: { url: '/api/auth/logout', method: 'post' },
          user: { url: '/api/auth/user', method: 'get', propertyName: 'user' }
        }
      }
    },
    redirect: {
      login: '/login',
      logout: '/login', # <- ここだけ少し気に入らないが。
      home: '/'
    }
  }