JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://vuejs.org/js/vue.min.js"></script>
<div id="demo">
  <p v-on:mouseover="mouseOver" v-bind:class="{on: active, 'off': !active}">Hover over me!</p>
</div>

CSS

.on {color: green;}

.off {color: red;}

JavaScript

var demo = new Vue({
  el: '#demo',
  data: {
    active: false
  },
  methods: {
    mouseOver: function() {
      this.active = !this.active;
      console.log("flag " + this.active);
    }
  }
});