JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ramda/0.24.1/ramda.min.js"></script>
<div id="list">
<input type="text" v-model="search">
		<ol>
		  <li v-for="(items, key) in groupedItems">
		    <h3>{{ key }}</h3>
		        <p v-for="todo in items">{{ todo.name }}</p>
		  </li>
		</ol> 
	</div>

Babel + JSX

var list = new Vue({
		el: '#list',
		data: {
    	search: '',
			items: [
				{ name: 'mike', type: 'student' },
				{ name: 'beckham john', type: 'footballer' },
				{ name: 'walcott', type: 'footballer' },
        { name: 'cech', type: 'footballer' },
        { name: 'jordan', type: 'actor' },
        { name: 'tom', type: 'actor' },
        { name: 'john', type: 'actor' }
			]
		},
    computed: {
    	groupedItems() {
      	const arr = {}
        //fungsi search
        var searchResult = this.items.filter( todo => {
        	return todo.name.toLowerCase().indexOf(this.search.toLowerCase())>-1
        } )
        //grouping
        for(var i = 0; i < searchResult.length; i++) {
        	const key = searchResult[i].type
        	if (arr[key]) {
          	arr[key].push(searchResult[i])
          } else {
          	arr[key] = [searchResult[i]]
          }
        }
        

     
        
        return arr
      }
    }
	})