This.$auth0.user returns undefined in Vue 3

Help
1

I am following the quick start guide for Vue js and I want to retrieve the user info after login is successful and save it in localstorage. I am using pinia to do so. After logging in user is just undefined tho and I see in the auth0 dashboard that the login was successful. The Header component is outside of the main component and therefore is present on every page. How do I fix this?

Here’s my code:

<template>
    <el-menu class="home-menu" mode="horizontal" :ellipsis="false" :router="true">
     ...
     ...
     ...
        <el-menu-item v-if="logged_in" index="1" route="/profile">Hi, {{ current_user }}</el-menu-item>
     ...
     ...
       <el-menu-item index="2-3" @click="logoutUser">Logout</el-menu-item>
     ...
        <el-menu-item v-else index="4" @click="loginUser">Login</el-menu-item>
    </el-menu>
</template>

<script>
import logo from "../assets/logo.png";
import { mapActions, mapState } from 'pinia'
import { useAuthStore } from '../stores/auth.js'

export default {
    name: 'Header',
    data: function () {
        return {
            logged_in: this.getIsAuthenticated(),
            logo: logo,
            current_user: this.$auth0.user
        };
    },
    methods: {
        ...mapState(useAuthStore, ['getUser', 'getIsAuthenticated', 'getRole']),
        ...mapActions(useAuthStore, ['login', 'logout']),
        loginUser() {
            this.$auth0.loginWithRedirect({
                appState: {
                    target: "/survey-designer",
                },
            }).then(() => {
                this.login(this.$auth0.user);
            });
        },
        logoutUser() {
            this.logout()
            this.$auth0.logout({ returnTo: window.location.origin });
        },
    }
}
</script>