FingerprintJS2 in Single File Component Vue

Index.vue

<template>
  <div>
    <h1>Fingerprintjs2 with Vue</h1>
    <div v-if="loading">
      Getting Information...
    </div>
    <div v-else-if="!loading">
    <p style="color:red" v-if="(fingerprintID != '') && (fingerprintID != dbprintID)">YOU'RE FAKE</p>
    <p style="color:green" v-else-if="(fingerprintID != '') && (fingerprintID == dbprintID)">YOU'RE LEGIT</p>
      <p>
        Your browser fingerprint:
        <strong>{{ fingerprintID}}</strong>
      </p>
      <p>
        Time took to calculate the fingerprint:
        <strong>{{calculationTime}} ms</strong> 
      </p>
      <p>
        <strong>Detailed information:</strong>
      </p>
      <!--nested Objects{value,key}-->
      <ul>
        <li v-for="detail in details" :key="detail.id">
          <p v-if="detail.key != 'webgl' && detail.key != 'fonts'">{{detail.key}} : <b>{{detail.value}}</b></p>
          <p v-else-if="detail.key == 'webgl' || detail.key == 'fonts'">{{detail.key}}</p>
          <ul v-if="detail.key == 'webgl' || detail.key == 'fonts'">
            <li v-for="value in detail.value" :key="value">
              <b>{{value}}</b>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
//install fingerprintjs2 from yarn/npm 
import Fingerprint2 from "fingerprintjs2";
export default {
  data() {
    return {
      authChecked: "",
      loading: true,
      fingerprintID: "",
      calculationTime: 0,
      details: [],
      dbprintID: "5de5f366ece2fcd36919c386a46703a7" //example of databaseMatching
    };
  },
  methods: {
  //`this` likely calls window instead of Vue's, so i bind param e as `this` in mounted()
    getFingerPrint(e) {
    if (window.requestIdleCallback) {
      requestIdleCallback(function() {
        Fingerprint2.get(function(components) {
          console.log("Callback:" + components); // an array of components: {key: ..., value: ...}
          var startTime = new Date();
          var murmur = Fingerprint2.x64hash128(
            components
              .map(function(pair) {
                return pair.value;
              })
              .join(),
            31
          );
          e.fingerprintID = murmur;
          e.details = components;
          var endTime = new Date();
          var timeMs = endTime - startTime;
          e.calculationTime = timeMs;
          e.loading = false;
        });
      })}else{
        setTimeout(function () {
        Fingerprint2.get(function (components) {
          // console.log(components) // an array of components: {key: ..., value: ...}
          console.log("Timeout:" + components); // an array of components: {key: ..., value: ...}
          var startTime = new Date();
          var murmur = Fingerprint2.x64hash128(
            components
              .map(function(pair) {
                return pair.value;
              })
              .join(),
            31
          );
          e.fingerprintID = murmur;
          e.details = components;
          var endTime = new Date();
          var timeMs = endTime - startTime;
          e.calculationTime = timeMs;
          e.loading = false;
        })  
    }, 500)
      }
  }
  },
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {
   this.$nextTick().then((function () {
      let v=this
    this.getFingerPrint(v) // Vue instance
  }).bind(this))
  }
};
</script>