Vue.js – *Nuxt JS Auth* Why after success login with loginWith in template sections auth.loggedIn is true, but in middleware file is false

I just started learning NuxtJS and I want to implement authentication by auth module for Nuxt.
I don't know why, but login with loginWith seems working, on vue files I can get data about logged user and loggedIn variable has true value. But I noticed when I set middleware from auth module, even if I'm logged in, server is redirecting always to login endpoint. I saw that I can make my middleware file, but there loggedIn has value false, so I can't be redirected correctly.

index.vue

<template>
    <div id="main-page">
        <panel />
    </div>
</template>

<script>
import panel from "~/components/Panel.vue"


export default {
    middleware: ['authenticated'],
    'components': {
        panel
    },

};
</script>

My login component:

<template>
    <div id="form-wrapper">
        <b-form-group 
            class="ml-3 mr-5"
            label="Username"
            label-for="id-username"
            :invalid-feedback="invalidFeedback"
            :state='state'
        >
            <b-form-input id="id-username" v-model="username" type="text" placeholder="elo"></b-form-input>        
        </b-form-group>
        <b-form-group 
            class="ml-3 mr-5"
            label="Password"
            label-for="id-password"
            :invalid-feedback="invalidFeedbackPass"
            :state='statePass'
        >
            <b-form-input id="id-password" v-model="password" type="password"></b-form-input>        
        </b-form-group>
        <b-button v-b-modal.login-modal class="ml-3 mr-5" variant="outline-success">Login</b-button>
<div v-if="$auth.loggedIn">{{ $auth.loggedIn }}</div> // here is true after login

        <b-modal ref="login-modal" id="login-modal" hide-footer hide-header>
            <p>Login: {{ username }} Hasło: {{ password }}</p>
            <b-button @click="loginUser({username, password})">Send</b-button>
        </b-modal>
    </div>    
</template>

<script>
import "bootstrap-vue"
import axios from "axios"

export default {
    name: "loginForm",
    data() {
        return{
            username: '',
            password: '',
        }
    },
    props: {

    },
    methods: {
        async loginUser(loginInfo){
            try {
                await this.$auth.loginWith('local', {
                    data: loginInfo
                });
            } catch (e) {
                this.$router.push('/');
            }
        }

    },
...
</script>

nuxt.config.js for auth

auth: {
    strategies: {
      local: {
        endpoints: {
          login: { url: '/auth/token/login/', method: 'post', propertyName: 'auth_token' },
          logout: { url: '/auth/token/logout/', method: 'post' },
          user: { url: '/auth/users/me/', method: 'get', propertyName: false }
        },
        tokenRequired: true,
        tokenType: 'Token',
        tokenName: 'Authorization'
      }
    },

    redirect: {
      login: "/",
      logout: "/",
      home: "/home"
    },

  },

autenticated.js in middleware

export default function ({ store, redirect }) {
  console.log(store.state.auth.loggedIn); // here returns false, even after success login
  if (store.state.auth.loggedIn) {
    return redirect('/home')
  }
}

Worth to mention is that, it's running on docker. Maybe that's a problem.

UPDATE
I changed nuxt mode from SSR to SPA and now everything works from nuxt auth module.

But I want to that works on SSR, so if someone have solution, please share.