Cannot read properties of null (reading 'some') when accessing auth user permission

Hi,

I am trying to access user permissions after user login to dashboard in vue 3. Getting

Cannot read properties of null (reading 'some')

error once user login and redirect to dashboard page. I am use vue 3 project separate. Use Pinia as state management system. use laravel as bakend.

Here is my, Dashboard.vue

<script setup>
 import {onMounted} from "vue";
 import {useAuthStore} from "../../stores/auth.js";
import DashboardLayout from "../../layouts/DashboardLayout.vue";
const authStore = useAuthStore();
onMounted(async () => {
      // await  authStore.getUser();
     //console.log(authStore.user)
    if (authStore.user){
        await  authStore.getUser();
    }
 });
</script>
<template>
<DashboardLayout>
  <h2>Section title {{authStore.user_permissions.some((p) => p.name === 'edit user')}}</h2>
  <div class="table-responsive">
    
  </div>
</DashboardLayout>
</template>
<script>
export default {

}
</script>

auth.js

import {defineStore} from "pinia";
import axios from "axios";

export const useAuthStore = defineStore("auth", {
    state: () => ({
        authUser: null,
        authErrors: [],
        authStatus: null,
        userRoles: null,
        userPermissions: null,
    }),

    getters: {
        user: (state) => state.authUser,
        errors: (state) => state.authErrors,
        status: (state) => state.authStatus,
        user_roles: (state) => state.userRoles,
        user_permissions: (state) => state.userPermissions,
    },
    actions: {
        async getToken() {
            await axios.get('/sanctum/csrf-cookie');
        },
        async getUser() {
            await  this.getToken();
            const data = await axios.get('/api/user');
            this.authUser = data.data;
            this.userRoles = data.data.roles;
            this.userPermissions = data.data.permissions;
        },

        async handleLogin (data)  {
            this.authErrors = [];
            await this.getToken();
            try {
                await axios.post('/api/login',{
                    email: data.email,
                    password: data.password,
                });
                //console.log(this.getUser())
                this.router.push('/admin/dashboard');

            } catch (error) {
                if (error.response.status === 422){
                    this.authErrors = error.response.data.errors;
                }
            }
        },

        async handleRegister  (data) {
            this.authErrors = [];
            await this.getToken();
            try {
                await axios.post('/api/register', {
                    name: data.name,
                    email: data.email,
                    password: data.password,
                    password_confirmation: data.password_confirmation,
                });
                this.router.push("/");

            } catch (error) {
                if (error.response.status === 422){
                    this.authErrors = error.response.data.errors;
                }
            }
        },

        async handleLogout () {
            await axios.post('logout');
            this.authUser = null;
            this.router.push('/login');
        },

        async handleForgotPassword(email) {

            this.authErrors = [];
            await this.getToken();

            try {
                const response = await axios.post('forgot-password', {
                    email: email,
                });
                this.authStatus = response.data.status;
            } catch (error) {
                if (error.response.status === 422){
                    this.authErrors = error.response.data.errors;
                }
            }
        },

        async handleResetPassword(resetData) {
            this.authErrors = [];

            try {

                const response =  await axios.post('reset-password', resetData);
                this.authStatus = response.data.status;
            } catch (error) {
                if (error.response.status === 422){
                    this.authErrors = error.response.data.errors;
                }
            }
        },

    },
});

main.js

import { createApp, markRaw, onMounted } from 'vue'
import {createPinia} from "pinia";
import router from "./router/index.js";

import './axios'

import './style.css'

import "bootstrap/dist/css/bootstrap.css";
import "bootstrap/dist/js/bootstrap.js";

import { library } from '@fortawesome/fontawesome-svg-core'
import {faHatWizard, faBars, faGauge, faCartShopping, faHandHoldingDollar} from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

library.add(faGauge, faBars, faCartShopping, faHandHoldingDollar)



const pinia = createPinia();

pinia.use(({store}) => {
    store.router = markRaw(router);
});

import App from './App.vue'


const app = createApp(App);
app.use(pinia);
app.component('font-awesome-icon', FontAwesomeIcon);
app.use(router);
app.mount('#app');

Anyone have an idea?