vuejs 2.x filter

filter.js

new Vue({
    el: '#app',
    data() {
        return {
            testData: [{ name: 'foo' }, { name: 'bar' }, { name: 'foobar' }, { name: 'test' }],
            filterValue: '',
            sortAsc: true
        };
    },
    computed: {
        filteredAndSortedData() {
            let result = this.testData;
            if (this.filterValue) {
                result = result.filter(item => item.name.includes(this.filterValue));
            }

            let ascDesc = this.sortAsc ? 1 : -1;
            return result.sort((a, b) => ascDesc * a.name.localeCompare(b.name));
        }
    },
    methods: {
        invertSort() {
            this.sortAsc = !this.sortAsc;
        }
    }
});

index.html

<div id="app">
    <div>{{filteredAndSortedData}}</div>
    <div>
        <input type="text" v-model="filterValue" placeholder="Filter">
        <button @click="invertSort()">Sort asc/desc</button>
    </div>
</div>