JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8"/>
<title>Star War</title>
<link rel="stylesheet" type="text/css" href="node_modules/bootstrap/dist/css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="node_modules/font-awesome/css/font-awesome.css"/>
</head>
<body>
	
<div class="container" id="app">
	<div class="row">
		<h1>Star War Movie Characters</h1>
	</div>
			<div class="well">
			   <input  type="search" v-model="MySearch" class="form-control"  placeholder="Search for any of the columns"/>
         <select v-model="selected">
           <option disabled value="">Escolha um item</option>
           <option>preto</option>
           <option>loiro</option>
        </select>
	        </div>   
    
        <div class="row">
        <table class="table">
            <thead>
              <tr>
                <th>Nome</th>
                <th>Altura</th>
                <th>Peso</th>
                <th>Cor dos Olhos</th>
                <th>Gênero</th>
                <th>Cor dos cabelos</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="bancodedado in filteredBancodedaos ">
                <td>{{ bancodedado.name }}</td>
                <td>{{ bancodedado.height }}</td>
                <td>{{ bancodedado.mass }}</td>
                <td>{{ bancodedado.eye_color }}</td>
                <td>{{ bancodedado.gender }}</td>
                <td>{{ bancodedado.hair_color }}</td>
              </tr>
            </tbody>
          </table>
    </div>

</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.3.6/vue-resource.js"></script>
<script>

var app = new Vue({
  el: '#app',
  data: {
    bancodedados: [
			{	
				name: 'wladimir',
				height: '172',
				mass: '56',
				eye_color: 'preto',
				gender: 'masculino',
				hair_color: 'castanho'
			 },
			 {	
				name:...