[Vuejs]-Create a method to apply filters in a task list

new Vue({
	el: "#databinding",
	data: function() {
		return {
			status: 'all',
			todos: [
				{
					id: 1,
					isDone: false
				},
				{
					id: 2,
					isDone: true
				},
				{
					id: 3,
					isDone: true
				},
				{
					id: 4,
					isDone: false
				},
				{
					id: 5,
					isDone: false
				}
			],
		};
	},
	methods: {
		changeView: function (newStatus) {
			this.status = newStatus
		}
	},
	computed:{
		activeTodos: function() {
			return this.todos.filter(t => !t.isDone);
		},
		completedTodos: function () {
			return this.todos.filter(t => t.isDone);
		},
		filteredTodos() {
			switch (this.status) {
				case 'active':
					return this.activeTodos;
				case 'completed':
					return this.completedTodos;
				default:
					return this.todos;
			}
		}
	}
});

body {
	margin: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="databinding">
	<p>{{status}} Todos</p>
	<ul id="todos">
		<li v-for="todo in filteredTodos" :key="todo.id">
			{{todo.id}} - {{todo.isDone}}
		</li>
	</ul>
	<div class="filters">
		<button @click="changeView('all')">All</button>
		<button @click="changeView('active')">Active</button>
		<button @click="changeView('completed')">Completed</button>
	</div>
</div>