JSFiddle - React, Tailwind, and code Playground

HTML

<div id="app">
  <ul>
    <li @click="activate(li.id)" :class="{ active : active_el == li.id }" v-for="li in lista">{{li.texto}}</li>   
  </ul>
</div>

CSS

ul > li:hover {
  cursor:pointer;
}
.active {
  color:red;
  font-weight:bold;
}

JavaScript

var app = new Vue({
  el:"#app",
  data:{
  	lista:[{"id":"1","texto":"line 1"},{"id":"2","texto":"line 2"},{"id":"3","texto":"line 3"},{"id":"4","texto":"line 4"},{"id":"5","texto":"line 5"}],
    active_el:0
  },
  methods:{
    activate:function(el){
        this.active_el = el;
    }
  }
});