how to get html element id in vue @click?

The this will have a scope of the entire component. If there is no id declared in the script section, it will throw an error.

Here, you can directly send the id to the function as follows,

<li v-for="subject in this.$root.$data.LoggedUserSubjects">
    <button :style="btnStyleObject" :id="subject.subject.id" @click="showSessions(subject.subject.id)" class="btn btn-primary">{{subject.subject.name}}</button>
</li>

Or you can call the function without any parameters and get the target item as follows

<li v-for="subject in this.$root.$data.LoggedUserSubjects">
    <button :style="btnStyleObject" :id="subject.subject.id" @click="showSessions" class="btn btn-primary">{{subject.subject.name}}</button>
</li>

Inside the method:

showSessions:function(e){
   console.log(e.target.id); // this will give you the id of the target element.
}