This.$auth0.user returns undefined in Vue 3

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:

    <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>

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() {
                appState: {
                    target: "/survey-designer",
            }).then(() => {
        logoutUser() {
            this.$auth0.logout({ returnTo: window.location.origin });