Towards OOP in Vue.js

export default class Weapon{
    constructor(val, type)
    {
      this.val = val;
      this.family = type;
    }
  }

import Weapon from "./my/path/Weapon.js"; //Weapon variable is available, we can construct new weapon is `new`

export default class NPC{ //don't forget to export this class too!
  constructor()
  {
    this.weapons = [];
    this.weapons[0] = new Weapon(5,"bamboo"); //new instance of weapon!
  }

  pickWeapon(wpn)
  {
    this.weapons.push(weapons);  
  }

  throwWeapon()
  {
    this.weapons.pop();
  }
}

<template>
  <div class="hello">
        <h1>{{ msg }}</h1>
        <p v-if="hand">
        yo!
        {{ npc.weapons.length }}<br/> <!--displaying size of the weapons array of the npc-->
        </p>
    </div>
</template>
<script>

import Weapon from '../model/Weapon.js' //don't forget to import them
import NPC from '../model/NPC.js'

export default {
  name: 'myComponents',
  props: {
    msg: String
  },
  data(){ //remember, in a component, data must be a function! 
    return{
      npc: null, //our npc object
    }
  },
  mounted(){ //hook on mounted, we init the object. It could have been done before.
    this.npc = new NPC();

    this.npc.pickWeapon(new Weapon(7, "chakram"));
    console.log("New weapon acquired! GG");

    setTimeout(() => { //update of the weapons, we will throw a weapon in 2 sec, for testing reactivity since we print the array length!
      this.npc.throwWeapon();
      console.log("Weapon throws");
      this.npc.weapons[0].family = "reactivIsIt?"; //re-render once modified!
      }, 2000);
  }
}

</script>