JSFiddle - React, Tailwind, and code Playground

HTML

<div id="app">
  <child msg="My life so good and awesome, is'nt it great?" search="   life   is   good  " effect='sexiness'> </child>
</div>

CSS

.sexiness {
  background-color: #e0f0ff;
}

JavaScript

Vue.component('child', {
  props: ['msg', 'search', 'effect'],
  template: '<span><span v-for="(s, i) in parsedMsg" v-bind:class="getClass(i%2)">{{s}}</span></span>',
  methods: {
  	getClass: function(i) {
    	var myClass = {};
      myClass[this.effect] = !!i;
      return myClass;
    },
  },
  computed: {
  	parsedSearch : function () {
    	return '(' + this.search.trim().replace(/ +/g, '|') + ')';
    },
  	parsedMsg: function() {
    	return this.msg.split(
      	new RegExp(this.parsedSearch , 'gi'));
    }
  }
})

new Vue({
  el: '#app',
  data: {
  	a: 'love'
  }
})