Load an object in javascript class to use un vue 3 component

For few weeks I learn Vue3 with a REST API i've done and i'm sure is working. My project is kinda simple but to make it more fluent i'd like to create a table with many informations from many objects.

To do so i'd like to know how to create a class called VisionTablette which take the informations about a tablette but that will load other information related to the tablette.

For now I have been able to create the object which is here :

import axios from "axios";

export default class VTab {
  constructor(idTab) {
    this.id = idTab;
    this.nom = null;
    this.personnel = null;
    this.listEtat = new Array();
    this.dateAchat = null;
    this.dateFinGarantie = null;
    this.loadTablette();
    this.loadEtats();
  }

  loadTablette() {
    axios("http://localhost:7070/apitab/tablette/" + this.id)
      .then((response) => {
        this.nom = response.data.nom;
        this.dateAchat = response.data.dateAchat;
        this.dateFinGarantie = response.data.dateFinGarantie;
      })
      .catch((error) => console.log("Error", error.message));
  }

  loadEtats() {
    axios("http://localhost:7070/apitab/tablette/" + this.id + "/etats")
      .then((response) => {
        response.data.forEach((etat) => {
          if (this.personnel == null) this.loadPersonnel(etat.personnel);
          this.listEtat.push(etat);
        });
      })
      .catch((error) => console.log("Error", error.message));
  }

  loadPersonnel(idPerso) {
    axios("http://localhost:7070/apitab/personnel/" + idPerso)
      .then((response) => {
        this.personnel = response.data;
      })
      .catch((error) => console.log("Error", error.message));
  }
}

The object is 100% working and i've tested it, it loads everything but once i use it in my vue component it does not display the informations. Here is the component, the id i'm passing is just to make sure it work before further work

<template>
  <div class="text-h6" :key="vTab">{{ vTab.nom }}</div>
</template>

<script>
import { defineComponent, ref, defineAsyncComponent } from "vue";
import VTab from "../Objects/VisionTab";
export default defineComponent({
  name: "VisionTablette",
  props: {
    tabId: {
      required: true,
    },
  },
  data() {
    return {
      vTab: ref({}),
    };
  },
  mounted() {
    this.vTab = new VTab(this.tabId);
    console.log(this.vTab);
  },
});
</script>

As i have the issue since few days i see that the nom is not displayed but on the console my object is correctly build in the [[Target]] element.

I am sure there is a solution that may fit my vision but if you have an alternative way to use complex object like this on vue components i am also hearing.