[Vuejs]-Why is my data filter function returning empty?

When you click on messageIncompleted, the this.messages array is updated with items which have messages.completed = false. When you click on messageCompleted, the messages array won’t have any items with messages.completed = true.

To fix this, you can create another property called filteredMessages to store and display the messages based on criteria. By default, you can set it to this.messages. This way, messages array won’t be directly mutated.

messageIncompleted() {
    this.filteredMessages = this.messages.filter(messages => !messages.completed);
    this.disabledIncomplete = true;
},
messageCompleted() {
    this.filteredMessages = this.messages.filter(messages => messages.completed);
    this.disabledComplete = true;
}