flaschengeist-frontend/src/plugins/user/pages/User.vue

<template>
  <div>
    <q-page padding class="fit row justify-center content-center items-center">
      <q-card class="col-4" height="">
        <q-card-section>
          Name: {{ userObj.firstname }} {{ userObj.lastname }}<br />
          E-Mail: {{ userObj.mail }}<br />
          Roles:
          <ul v-for="(role, index) in userObj.roles" :key="'role' + index">
            <li>{{ role }}</li>
          </ul>
          <br />
          Token expires: {{ sessionObj.expires }}
        </q-card-section>
      </q-card>
    </q-page>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed } from '@vue/composition-api';
import { Store } from 'vuex';
import { StateInterface } from 'src/store';

export default defineComponent({
  // name: 'PageName'
  setup(_, { root }) {
    const store = <Store<StateInterface>>root.$store;

    const userObj = computed(() => store.state.user.currentUser);

    const sessionObj = computed(() => store.state.session.currentSession);

    return { userObj, sessionObj };
  }
});
</script>