[Nuxt.js]auth moduleで$auth.loggedInがtrueにならない

前提・実現したいこと

サーバーサイドはRailsでdevise_token_auth、フロントはNuxt.jsでauth moduleを使って開発しています。

v-ifとv-elseを使って、ヘッダー部分の新規登録・ログインのボタンが、ログイン後にユーザーメニューのボタンに切り替わるような機能を実装したいのですが、

・ログインには成功し、Localstrageにトークンが保存され、ログアウトも出来る。

という状況です。

storeが有効になるよう、storeディレクトリに空のindex.jsファイルの作成もしています。

発生している問題・エラーメッセージ

・ログイン後に、$auth.state.auth.loggedInと$auth.loggedIn、$auth.userがfalseのまま
・ログイン後のリダイレクトも機能していない

Rails側のログはしっかり動いているので、バックエンド側には問題はないと考えているのですが、こういった場合はどのような原因が考えられますでしょうか。

該当のソースコード

ログインした際のrailsのログ

Started POST "/api/v1/auth/sign_in" for ::1 at 2021-11-15 01:26:51 +0900
Processing by DeviseTokenAuth::SessionsController#create as HTML
  Parameters: {"email"=>"example@example.com", "password"=>"[FILTERED]", "session"=>{"email"=>"example@example.com", "password"=>"[FILTERED]"}}

Completed 200 OK in 454ms (Views: 2.2ms | ActiveRecord: 38.9ms | Allocations: 6231)

vue
1nuxt.config.js------
2
3export default {
4  server: {
5    port: 8080
6  },
7  
8  // Disable server-side rendering: https://go.nuxtjs.dev/ssr-mode
9  ssr: false,
10・
11・
12・
13  // Global CSS: https://go.nuxtjs.dev/config-css
14  css: [
15  ],
16
17  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
18  plugins: [
19    { src: '~/plugins/axios.js', ssr: false }
20  ],
21
22  // Auto import components: https://go.nuxtjs.dev/config-components
23  components: true,
24
25  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
26  buildModules: [
27    // https://go.nuxtjs.dev/vuetify
28    '@nuxtjs/vuetify',
29  ],
30
31  // Modules: https://go.nuxtjs.dev/config-modules
32  modules: [
33    // https://go.nuxtjs.dev/axios
34    '@nuxtjs/axios',
35    '@nuxtjs/auth-next'
36  ],
37
38  // Axios module configuration: https://go.nuxtjs.dev/config-axios
39  axios: {
40    baseURL: 'http://localhost:3000'
41  },
42
43  router: {
44    middleware: ['auth']
45  },
46
47  auth: {
48    redirect: {
49      login: '/login', 
50      logout: '/login',
51      callback: false,
52      home: '/'
53    },
54    strategies: {
55      local: {
56        token: {
57          property: 'access_token'
58        },
59        endpoints: {
60          login: { url: '/api/v1/auth/sign_in', method: 'post', propertyName: false },
61          logout: { url: '/api/v1/auth/sign_out', method: 'post' },
62          user: { url: '/api/v1/auth/user', method: 'get', propertyName: false }
63        }
64      }
65    }  
66  },
67・
68・
69・
70}
71

vue
1/plugins/axios.js------
2
3export default function({ $axios }) {
4  $axios.onRequest(config => {
5    config.headers.client = window.localStorage.getItem("client")
6    config.headers["access-token"] = window.localStorage.getItem("access-token")
7    config.headers.uid = window.localStorage.getItem("uid")
8    config.headers["token-type"] = window.localStorage.getItem("token-type")
9  })
10
11  $axios.onResponse(response => {
12    if (response.headers.client) {
13      localStorage.setItem("access-token", response.headers["access-token"])
14      localStorage.setItem("client", response.headers.client)
15      localStorage.setItem("uid", response.headers.uid)
16      localStorage.setItem("token-type", response.headers["token-type"])
17    }
18  })
19}

vue
1login.vue------
2
3<template>
4<v-app>
5  <div class="mt-3">
6    <v-card class="mt-5 mx-auto" max-width="600">
7      <v-form ref="form">
8        <v-container>
9          <v-row justify="center">
10            <p cols="12" class="mt-3 display-1 grey--text">
11              ログイン
12            </p>
13            <p>{{ $auth.loggedIn }}</p>
14          </v-row>
15          <v-row justify="center">
16            <v-col cols="12" md="10" sm="10">
17              <v-text-field
18                v-model="email"
19                label="Eメールアドレス"
20              />
21              <p class="caption mb-0" />
22            </v-col>
23          </v-row>
24          <v-row justify="center">
25            <v-col cols="12" md="10" sm="10">
26              <v-text-field
27                v-model="password"
28                type="password"
29                label="パスワード"
30              />
31            </v-col>
32          </v-row>
33          <v-row justify="center">
34            <v-col cols="12" md="10" sm="10">
35              <v-btn
36                block
37                class="mr-4 blue white--text"
38                @click="loginWithAuthModule"
39              >
40                ログイン
41              </v-btn>
42            </v-col>
43          </v-row>
44        </v-container>
45      </v-form>
46    </v-card>
47  </div>
48</v-app>
49</template>
50
51<script>
52export default { 
53  middleware({ store, redirect }) {
54    if(store.$auth.loggedIn) {
55      redirect('/');
56    }
57  },
58
59  data () {
60    return {
61      password: 'password',
62      email: 'example@example.com'
63    }
64  },
65  methods: {
66    async loginWithAuthModule () {
67      await this.$auth.loginWith('local', {
68        data: {
69          email: this.email,
70          password: this.password
71        }
72      })
73        .then((response) => {
74          return response
75        },
76        (error) => {
77          return error
78        })
79    }
80  }
81}
82</script>
83
84