User.vue

<template>
<div :id="'user-name-' + user.id">
  <component :is="anchor ? 'a' : 'span'" :href="anchor ? '#' : false" @click="openUser">{{user.displayName}}</component>
  <b-tooltip ref="user-tooltip" :target="'user-name-' + user.id" placement="bottom">
    <div class="text-left">
      <p><strong>User id</strong>: {{user.id}}</p>
      <p><strong>Identities</strong>:</p>
      <ul>
        <li v-for="identity in user.identities" v-bind:key="identity.typedId">
          {{identity.email}} ({{identity.type}})
        </li>
      </ul>
    </div>
  </b-tooltip>
</div>
</template>

<script>
export default {
  name: 'User',
  props: {
    user: Object,
    anchor: Boolean
  },
  methods: {
    openUser() {
      this.$store.dispatch('openUserPage', this.user.id);
    }
  }
}
</script>