Фильтрация таблицы с помощью select vue.js

<template> 
  <select name="select" v-model="selected"> 
		<option disabled value="">Выберите один из вариантов</option> 
		<option v-for="option in options" v-bind:value="option.value"> {{ option.text }} </option> 
	</select> 
</template> 
 
<script> 
export default { 
	data: function() { 
		return { 
			selected: '', 
			options: [ 
				{ text: 'User', value: 'user'}, 
				{ text: 'Admin', value: 'admin'}, 
				{ text: 'superAdmin', value: 'superAdmin'} 
			] 
		} 
	} 
} 
</script> 
 
// Table 
 
<template> 
	<div class="container"> 
		<table> 
			<tr> 
				<th v-for='column in columns' v-on:click='sortTable(column)'> 
					{{ column }} 
				</th> 
			</tr> 
			<tr v-for='row in filteredUsers'> 
				<td v-for="column in columns">{{row[column]}}</td> 
			</tr> 
		</table> 
	</div> 
	 
</template> 
 
<script> 
 
export default { 
	props: ['searchQuery'], 
  data: function() { 
    return { 
			selected: 'admin', 
			rows: [ 
				{ name: 'John', email: "john@gmail.com", root: 'superAdmin' }, 
				{ name: 'Jane', email: "jane@gmail.com", root: 'superAdmin' }, 
				{ name: 'Paul', email: "paul@gmail.com", root: 'Admin' }, 
				{ name: 'Kate', email: "kate@gmail.com", root: 'Admin' }, 
				{ name: 'Amanda', email: "amanda@gmail.com", root: 'User' }, 
				{ name: 'Steve', email: "steve@gmail.com", root: 'superAdmin' }, 
				{ name: 'Keith', email: "keith@gmail.com", root: 'User' }, 
				{ name: 'Don', email: "don@gmail.com", root: 'Admin' }, 
				{ name: 'Susan', email: "susan@gmail.com", root: 'superAdmin' } 
			] 
    } 
	}, 
	computed: { 
		filteredUsers: function() { 
			return this.rows.filter(function(user) { 
				return user.name.toLowerCase().indexOf(this.searchQuery.toLowerCase()) > -1; 
			}.bind(this)); 
		} 
	} 
} 
</script>