ciao!

sto cercando di integrare alpine.js e list.js, che in pratica da delle varie funzioni di ordinamento e filtri lato client.
solo che non riesco, in quanto sostanzialmente list.js non funziona ma non da errori.
in pratica carico i dati, ma quando vado a fare il sorting da bottone, o faccio una ricerca, sparisce tutto.

questo il codice js:
codice:
function initData() {
  const url = "........";
  return {
    isLoading: false,
    items: [],
    getData() {
      this.isLoading = true;
      fetch(url)
          .then((response) => response.json())
          .then((data) => {
            this.items = data.books;
            this.isLoading = false;


            const options = {
              valueNames: ['title', 'author']
            };
            new List('books', options);
          });
    }
  }
}
questa la pagina html:
codice:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8">
    <title>TEST</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  </head>


  <body>


    <div x-data="initData()" x-init="getData()">
      <div id="books">
        <input class="search" placeholder="Search">
        <button class="sort" data-sort="title">Sort by titolo</button>
        <button class="sort" data-sort="author">Sort by titolo</button>


        <ul class="list">
          <template x-for="item in items" :key="item.id">
            <li>
              <h3 class="title" x-text="item.title"></h3>
              <p class="author" x-text="item.author"></p>
            </li>
          </template>
        </ul>
      </div>
    </div>


  </body>


  <script src="//cdnjs.cloudflare.com/ajax/libs/list.js/2.3.1/list.min.js"></script>
  <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
  <script src="script.js"></script>
</html>
qualche idea??