JSFiddle - React, Tailwind, and code Playground

HTML

<div id="demo">
  <p :style="getStyle()">Hover over color!</p>
  <p v-for="item in items" @mouseout="mouseOut" @mouseover="mouseOver(item)">{{ item }}</p>
</div>

JavaScript

new Vue({
  el: '#demo',
  data: {
    colorName: '',
    items: [ 'green', 'red', 'yellow', 'lime', 'brown', 'magenta', '#0FF' ]
  },
  methods: {
    mouseOver(colorName) {
      this.colorName = colorName;
    },
    mouseOut() {
      this.colorName = '';
    },
    getStyle() {
      return {
        color: this.colorName
      }
    }
  }
});