Как сделать отфильтрованный список более динамичным в Vue

Поэтому у меня есть список элементов, которые я просматриваю с помощью v-for. Перед тем, как распечатать список, он фильтруется значением, использующим метод .filter(). Также для изменения между отфильтрованными значениями используется v-on:click. Мой вопрос: есть ли способ сделать фильтр более динамичным? потому что, если предопределенные значения, которые я установил для фильтрации списка, будут изменены, фильтр больше не будет работать...

Я предоставил JSFiddle здесь. Итак, вы могли видеть, с чем я работаю.

Мои две основные области, вызывающие озабоченность, - это v-on и вычисленные методы.

<li class="d-flex justify-content-between" v-on:click="engagementFilterKey = 'recieved'">
     <div class="ml-3">
     <span class="text-muted">Received</span>
     </div>
</li>
<li class="d-flex justify-content-between" v-on:click="engagementFilterKey = 'preparation'">
     <div class="ml-3">
     <span class="text-muted">Preparation</span>
     </div>
</li>

Вот вычисленные методы

computed: {
    engagementFilter() {
      return this[this.engagementFilterKey];
    },
    recieved() {
        return this.allEngagements.filter((engagement) => engagement.status == 'Recieved')
    },
    preparation() {
        return this.allEngagements.filter((engagement) => engagement.status == 'Preparation')
    },

Пожалуйста, просмотрите скрипт, который я разместил в начале этой дискуссии...