javascript - Vuejs Sorting after rendering -

i've got elements tied @click

<th @click="sort('dateadded')" class="created_at">date added

what i'd call on page load / or when component renders in vuejs, in way i'd able have presorted table when opens up. apparently, if call after rendering still doesn't sort.

here's loop display items.

<tr is="song-item" v-for="item in displayeditems"  :orderby="dateadded" :song="item" ref="rows"></tr> 

and in computed i've following:

computed: {      displayeditems() {        return limitby( filterby(           this.mutateditems,           this.q,           'dateadded', 'title', 'album.name', 'artist.name',  'id',         ),         this.numofitems,       );     },       //displayeditems2(){return orderby (limitby (filterby( this.mutateditems, this.q, 'title', 'album.name', 'artist.name', 'dateadded'  ), this.numofitems,  ), 'dateadded', -1);},   } 

now thing if return orderby (displayeditems2) i'm unable sort page itself. how go on sorting pre-render or call sort('dateadded') externally? i.e., without clicking onto it.

all want able access sort('dateadded')

i'm trying sort before rendering/displaying: http://demo.koel.phanan.net/#!/songs (after logging in demo, use link) https://github.com/phanan/koel

it doesn't have date-added, if can reference sorting title. thank you.

maybe shoud use sorting in computed property.

  return limitby( filterby(       this.mutateditems,       this.q,       'dateadded', 'title', 'album.name', 'artist.name',  'id',     ),     this.numofitems,   ).sort(sortingfunction);