Multiple Computed Properties on Vue JS 2 data

Question

So I learned VueJS 2 removed the orderby funtionality in Vue2 :'( I have been attempting to rewrite my app in Vue2 and understand computed properties is the new way to go. I have the following:

alphabeticalPosts: function () {
    return _.orderBy(this.posts, 'name')
},

searchedPosts: function() {
    return this.posts.filter((post) => {
        return 
            post.name.toLowerCase().includes(this.keyword.toLowerCase());
     });
},

Both of these work separately from each other. The issue I am having is that I need both on the HTML like so:

<li v-for="post in searchedPosts/alphabeticalPosts">{{post.name}}</a>

Now, of course, this does not work but it illustrates my issue. I need both applied to the same data set. In Angular I would just pipe it like so:

ng-repeat="post in posts | searchedPosts | alphabetizePosts"

Of course, this also does not work in Vue. I'm under the impression I need to merge these two computer properties into one? My JS is lacking and every time I attempt this I end up with poor results. How do I go about using both my computed properties?

Answer 1

computed:{
    filteredAndOrdered: function () {
        const keyword = this.keyword.toLowerCase();
        const filtered = this.posts.filter(post => post.name.toLowerCase().includes(keyword));
        return _.orderBy(filtered , 'name')
    }
}

Template

<li v-for="post in filteredAndOrdered">{{post.name}}</a>