Someone knows why the variables that I define in VUE.js appear in this way

To correct that detail you must make use of the v-text property; you are going to make the arrangement of your code in the following way

This is the original arrangement that is made, however the problem arises that for a few seconds you see the syntax of the double keys

EXAMPLE (I will show you how to do it by means of an example so that you only adapt it to your needs)

<ul v-for="a in heros">
   <li>{{ a.name }}</li>
   <li>{{ a.poder }}</li>
   <li>{{ a.nivel }}</li>
 </ul>

You must now make use of the v-text directive, changing your code in the following way

<ul v-for="a in heros">
   <li v-text="a.name"></li>
   <li v-text="a.poder"></li>
   <li v-text="a.nivel"></li>
 </ul>

  

As you can see, thanks to the v-text directive, the values are loaded   immediately with the DOM element so that error of   Presnetation that you mention disappears

To avoid showing the keys you can support in v-cloak along with css, as indicated in the Vue documentation.

We declare the rule css:

[v-cloak] { display: none }

And in the element of our instance of Vue we add the directive 'v-cloak

<div id="app" v-cloak>
  {{ message }}
</div>

This will do is hide the content until the Vue instance is ready.

Documentation: link