'Vue computed rearranges array order when nothing is happening in firebase

I have an array that i get from firebase bindings. I am showing that array inside vue component like this:

<tr v-for="member in activeMembers" :key="member.id">
   <td>{{member.name}}</td>
   <td>{{member.email}}</td>
</tr>

And this is the computed property:

const activeMembers = computed(function() {    
  let filtered = members.value.filter(
    member => member.status === 'active',
  )    
  return filtered.sort((a, b) => (a.updated < b.updated) ? 1 : -1)
})

When a member is added or changed in firebase it should recompute and reorder and that part works, but there is a glitch where sometimes the whole members array is reordering but nothing is happening in the firebase. Can someone explain why is this happening and how to work around it? I am new in Vue so maybe i am missing something.

And also, when the page loads it rearranges the array multiple times. How can i avoid that, and do the ordering only once but still keep the computed?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source