I'm fairly new to vue.js and currently trying to style a specific item of a list group. My application is separated into a main nav, a side menu and a main content section. Clicking on an item in the list group supposedly highlights the clicked item and changes the main content. Changing the content works fine but I'm struggling with styling the item in the list. The code of the component for the side menu looks like this:

<div id="app">
<div>
    <b-list-group>
        <b-list-group-item 
            v-for="item in this.items" 
            v-on:click="selectItem(item.id)"
            :key="item.id" 
            class="item-selection">
                {{item.title}}
        </b-list-group-item>
    </b-list-group>
</div>
</div>

The 'items' array i'm getting the item from is stored in the vuex store and accessing everything works fine. I know you can set an individual item of a list group to "active", but since I'm getting my items from an array using a for-each construction, I could not figure out how to do that in my case. I tried to use a conditional class like this:

v-bind:class="{'item-selection':true, 'active-item':(item.id === this.currentItem)}"

but this just results in the items not even showing when starting the application. ('currentItem' is the index of the currently selected item which is also stored in the vuex store). The class 'item-selection' is just used for the general styling of the items (worked fine before adding the conditions) and is therefore hard coded true, the 'active-item' class I wanted to use for the highlighting.

Do you guys have any suggestions? Am I missing something (trivial)?

edit:

javascript:

new Vue({
  el: '#app',
  data: {
    items :[
      {id: 0,
       title: 'first item'},
       {id: 1,
       title: 'second item'},
       {id: 2,
       title: 'third item'}
    ],
    currentItem : 0
  },
  methods: {
    selectItem(id){
      currentItem = id;
    }
  }
})

css:

.item-selection:hover{
  color: black;
  cursor: pointer;
  background: #ebebeb;
}

.item-selection{
  background-color: #ffffff;
}

.active-item{
  background-color: #444444;
}