User.vue

<template>
  <div :id="'user-name-' + user.id">
    <span>{{user.displayName}}</span>
    <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">
            {{identity.email}} ({{identity.type}})
          </li>
        </ul>
      </div>
    </b-tooltip>
  </div>
</template>

<script>
export default {
  name: 'User',
  props: {
    user: Object
  }
}
</script>