title: Load an object in javascript class to use un vue 3 component
body: <p>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.</p>
  <p>To do so i'd like to know how to create a class called <code>VisionTablette</code> which take the informations about a tablette but that will load other information related to the tablette.</p>
  <p>For now I have been able to create the object which is here :</p>
  <pre class="lang-js prettyprint-override"><code>import axios from &quot;axios&quot;;
  
  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(&quot;http://localhost:7070/apitab/tablette/&quot; + this.id)
        .then((response) =&gt; {
          this.nom = response.data.nom;
          this.dateAchat = response.data.dateAchat;
          this.dateFinGarantie = response.data.dateFinGarantie;
        })
        .catch((error) =&gt; console.log(&quot;Error&quot;, error.message));
    }
  
    loadEtats() {
      axios(&quot;http://localhost:7070/apitab/tablette/&quot; + this.id + &quot;/etats&quot;)
        .then((response) =&gt; {
          response.data.forEach((etat) =&gt; {
            if (this.personnel == null) this.loadPersonnel(etat.personnel);
            this.listEtat.push(etat);
          });
        })
        .catch((error) =&gt; console.log(&quot;Error&quot;, error.message));
    }
  
    loadPersonnel(idPerso) {
      axios(&quot;http://localhost:7070/apitab/personnel/&quot; + idPerso)
        .then((response) =&gt; {
          this.personnel = response.data;
        })
        .catch((error) =&gt; console.log(&quot;Error&quot;, error.message));
    }
  }
  
  </code></pre>
  <p>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 <code>id</code> i'm passing is just to make sure it work before further work</p>
  <pre class="lang-js prettyprint-override"><code>
  &lt;template&gt;
    &lt;div class=&quot;text-h6&quot; :key=&quot;vTab&quot;&gt;{{ vTab.nom }}&lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import { defineComponent, ref, defineAsyncComponent } from &quot;vue&quot;;
  import VTab from &quot;../Objects/VisionTab&quot;;
  export default defineComponent({
    name: &quot;VisionTablette&quot;,
    props: {
      tabId: {
        required: true,
      },
    },
    data() {
      return {
        vTab: ref({}),
      };
    },
    mounted() {
      this.vTab = new VTab(this.tabId);
      console.log(this.vTab);
    },
  });
  &lt;/script&gt;
  
  </code></pre>
  <p>As i have the issue since few days i see that the <code>nom</code> is not displayed but on the console my object is correctly build in the <code>[[Target]]</code> element.</p>
  <p>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.</p>