Getter method is not working

[yusuftaufiq]

Hi there, I have a problem using the getter method. It seems that the getter method doesn't work in class components.

To be clear, I have the following components:

import { AlpineComponent } from '@leanadmin/alpine-typescript';
import User from '../interfaces/user'

export default class Contact extends AlpineComponent {
  public contacts: User[] = []

  public search: string = ''

  public init(): void {
    this.contacts = [
      { id: 1, name: 'smith' },
      { id: 2, name: 'john' },
      { id: 3, name: 'doe' },
      { id: 4, name: 'jean' },
    ]
  }

  public get filteredContacts(): User[] {
    return this.contacts.filter(({ name }: User): boolean => name.includes(this.search))
  }
}

And then when used on the view using the following code:

<input x-model="search" type="text" placeholder="Search users">
<ul>
  <template x-for="contact in filteredContacts">
    <li x-text="contact.name"></li>
  </template>
</ul>

It seems that filteredContacts is always stuck with the initial value and doesn't update dynamically. Is there a way to fix this, or maybe I'm missing something?