Nuxt component variable not updated

Question

I wrote the following code for my navbar:

<template>
  <div>
    <div v-if="!$auth.loggedIn" data-tip="Login" class="tooltip tooltip-bottom">
      <nuxt-link to="/login" class="btn btn-square btn-ghost">
        <solid-login-icon class="w-6 h-6" />
      </nuxt-link>
    </div>
    <div v-else class="flex items-stretch">
      <a class="pr-2 btn btn-ghost rounded-btn"> Welcome, {{ this.$auth.user.username }}!  </a>
      <div data-tip="Logout" class="tooltip tooltip-bottom">
        <button class="pr-2 btn btn-square btn-ghost" @click="logout()">
          <solid-login-icon class="w-6 h-6" />
        </button>
      </div>
    </div>
  </div>
</template>

Which is include in the following login page:

<template>
  <div class="h-screen shadow bg-base-200 drawer drawer-mobile">
    <input id="my-drawer-2" type="checkbox" class="drawer-toggle" />
    <div class="drawer-content">
      <NavBar />
      <div class="grid grid-cols-1 p-5 md:grid-cols-6">
        <div class="col-span-1 md:col-span-2 md:col-start-3">
          <div class="bg-white shadow card">
            <div class="card-body">
              <h2 class="text-left card-title">Login</h2>
              <form @submit.prevent="userLogin">
                <div class="form-control">
                  <label class="label">
                    <span class="label-text">Username</span>
                  </label>
                  <input
                    v-model="login.username"
                    type="text"
                    placeholder="Username"
                    class="input input-bordered"
                  />
                </div>
                <div class="form-control">
                  <label class="label">
                    <span class="label-text">Username</span>
                  </label>
                  <input
                    v-model="login.password"
                    type="password"
                    placeholder="Password"
                    class="input input-bordered"
                  />
                </div>
                <div class="mt-4">
                  <button type="submit" class="btn btn-primary btn-md">Login</button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
    <SideBar />
  </div>
</template>

<script>
export default {
  data() {
    return {
      login: {
        username: '',
        password: '',
      },
    }
  },
  methods: {
    async userLogin() {
      try {
        const response = await this.$auth.loginWith('local', { data: this.login })
      } catch (err) {}
    },
  },
}
</script>

Upon loggin in with correct credentials the page keeps dispalying the "Login"-icon instead of the Welcome message.

I've tried to replace !$auth.loggedIn with loggedIn (coming from the data function) and with !this.$auth.loggedIn" but both don't seem to solve the issue