Vue.js Variables

I am very new to Vue.js (and html in general), I am attempting to use Vue.js to automate Bulma tab switching without needing many HTML docs.

<li :class="[ tabsel === 'profile' ? 'is-active' : '']"> <a @click="tabsel = 'profile'">My Profile</a></li>

This is an example of one of the lines to swap which tab is active. I am curious where I can initialize the tabsel variable and how does scoping work?

I initially had a .js file that I loaded in as such:

let app = {};

let init = (app) => {
    app.vue = new Vue({
        e1: "#vueapp",
        data () {
            return {
                tabsel: "profile",
            }
        }
    });
}

Ultimately I am not sure if the first code snippet should be able to see this value. What is the proper way to initialize this variable? In my example does this not work because tabsel is a member of data which is not explicitly what the html bit is looking for?

Answer

In your example, your mistyped el with e1 and you forgot to create the HTML root element (that will be used to mount the app).

By correcting these errors, it works as you can see here:

let app = {};

let init = (app) => {
    app.vue = new Vue({
        el: "#vueapp",
        data () {
            return {
                tabsel: "profile",
            }
        }
    });
}

init(app)

.is-active {
  color: red;
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="vueapp">
  <ul>
    <li :class="[ tabsel === 'profile' ? 'is-active' : '']"> <a @click="tabsel = 'profile'">My Profile</a></li>
    <li :class="[ tabsel === 'example' ? 'is-active' : '']"> <a @click="tabsel = 'example'">Example</a></li>
  </ul>

</div>

As for the scope, as long as your variables are defined in data, they are reactive and you can use them in your HTML template.