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>