Updated Gist

Home.vue

<template>
  <div class="home">

    <label>
      Email:
      <input type="email" v-model="Email"/>
    </label>
    <button @click="Enroll">Enroll</button>
    <div v-if="Error.length >0">
      {{ Error }}
    </div>
    <div v-if="FaceId.length >0">
      <table>
        <tr>
          <td>
            Face ID
          </td>
          <td>
            {{ FaceId }}
          </td>
        </tr>
        <tr>
          <td>
            Gender
          </td>
          <td>
            {{ Gender }}
          </td>
        </tr>
        <tr>
          <td>
            Age
          </td>
          <td>
            {{ Age }}
          </td>
        </tr>
      </table>

    </div>
  </div>
</template>

<script>

import {Component, Prop, Vue} from 'vue-property-decorator';

@Component
export default class Home extends Vue {
  Email = '';
  FaceId = '';
  Gender = '';
  Age = 0;
  Error = '';

  async Enroll() {
    try {
      const enrollResult = await this.faceIO.enroll({
        payload: {
          email: this.Email
        }
      })
      this.FaceId = enrollResult.facialId;
      this.Gender = enrollResult.details.gender;
      this.Age = +enrollResult.details.age;
    } catch (e) {
      this.Error = e.message;
    }
  }

}
</script>