How to use js data in a template? - vue.js

Question

I'm trying to learn some useful skills while creating my Resume Website, so I decided to try Vue.js. I had no trouble understanding the basic structure of the framework, but I have trouble actually manipulating data in .Vue files.
What I'm trying to do currently is creating two classes in a tag:
Skills
Categories (list of skills with a name)
<script>
class Category {
name = "";
skills = [];
constructor(name) {
this.name = name;
this.skills = [];
}
}
class Skill {
constructor(name, level) {
this.name = name;
this.level = level;
}
}
let programmation = new Category("Programmation");
let cpp = new Skill("C++", "Confirmed");
programmation.skills.push(cpp);
let categories = [].push(programmation, ...);
Then, I create a list of categories with skills in them (I showed only one in the example code for clarity), and try to display those in my template as such:
<template>
<div class="skills">
<h1 v-for="cat in categories" v-bind:key="cat.name">{{cat.name}}</h1>
<container xl="1200"></container>
</div>
</template>
For now, I'm only trying to display the names of my categories.
However, the compiler show me this error:
error: 'categories' is assigned a value but never used (no-unused-vars) at src\views\Skills.vue:72:5:
71 |
> 72 | let categories = [].push(programmation, ...);
| ^
73 |
74 | export default {
75 | name: "skills",
while I'm using this value in the template. How am I supposed to define and use Js variables in my template?

Answer 1

You are using categories as reactive property inside vue component, but you need to register to make it reactivity
Here is the fix in export:
export default {
name: "skills",
data() {
return {
categories: categories,
};
},
components: {
//Skill
}
};
Here is the sample codepen: https://codepen.io/chansv/pen/YzzGOMz?editors=1010