How to fix nuxt auth page reload problem? - vue.js

Question

When I log in with nuxt auth, I redirect the user to his profile page. But after reload on the profile page I get an error like the screenshot:
I have searched this problem related to #nuxtjs/auth-next ssr problem. Most of the solution is to downgrade the #nuxtjs/axios version. I have already tried this but not fixed.
Here is my profile page code:
<template>
<div v-show="$auth.user">
<!-- profile image -->
<div class="w-full flex">
<div>
<div class="bg-gray-200 p-5 w-40 h-44"></div>
</div>
<div class="ml-6">
<h2 class="font-bold text-2xl mb-4">Profile Details</h2>
<h6 class="font-semibold text-lg">{{$auth.user.name}}</h6>
<p><span class="font-medium">Email: </span>{{$auth.user.email}}</p>
<p><span class="font-medium">Phone: </span>{{$auth.user.phone}}</p>
<p><span class="font-medium">Last Login: </span>{{$auth.user.lastLoginForHuman}}</p>
<nuxt-link to="/customer/change-password" class="block mt-3 text-primary-500 text-sm hover:underline">Change Password</nuxt-link>
</div>
</div>
<!-- details -->
<div class="w-full mt-5">
<div class="grid grid-cols-2 sm:grid-cols-2 gap-4">
<input-field label="First name"></input-field>
<input-field label="Last name"></input-field>
<input-field type="email" label="Email"></input-field>
<input-field label="Phone"></input-field>
</div>
<div class="flex justify-end">
<button-field label="Update" class="bg-primary-500 text-white py-3 px-10"></button-field>
</div>
</div>
</div>
</template>
<script>
export default {
name: "Profile",
data() {
return {
form: {
firstName: this.$auth.user?.firstName,
lastName: this.$auth.user?.lastName,
email: this.$auth.user?.email,
phone: this.$auth.user?.phone,
},
photo: null,
};
},
};
</script>
"#nuxtjs/auth-next": "^5.0.0-1624817847.21691f1",
"#nuxtjs/axios": "^5.13.6",
"nuxt": "^2.15.7"