I used a slightly different approach for my filters.

# js/todos.js
...
filters: {
	all: {label: 'All', action: () => true},
	active: {label: 'Active', action: (v) => !v.completed},
	completed: {label: 'Completed', action: (v) => v.completed}
},
selectedFilter: 'all',
get active(){
	return this.todos.filter(this.filters['active'].action);
},
get completed(){
	return this.todos.filter(this.filters['completed'].action);
},
...

I think this organizes the filtering logic nicely and also allows for shorter html markup as well as better future extendability. In the html markup, todos can be listed like this...

<!-- index.html -->
<template x-for="todo in todos.filter(filters[selectedFilter].action)" :key="todo.id">
    # todo markup remains the same
</template>

And the cleaner filter selection can be listed like this...

<!-- index.html -->
<template x-for="(filter, index) in filters">
	<li>
		<a href="#"
			:class="{selected: index === selectedFilter}"
			@click.prevent="selectedFilter = index"
			x-text="filter.label"
		></a>
	</li>
</template>

TodoMVC with Alpine: Part 2