ma in realtà il sorting ed il searching lo fa list.js attraverso le classi css.

in sostanza questo esempio con HTML statico, e non creato da alpine.js, funziona:
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>-->


    <div id="books">
      <input class="search" placeholder="Search">
      <button class="sort" data-sort="title">Sort by title</button>
      <button class="sort" data-sort="author">Sort by author</button>


      <ul class="list">
        <li>
          <h3 class="title">Cujo</h3>
          <p class="author">Stephen King</p>
        </li>
        <li>
          <h3 class="title">Iceberg</h3>
          <p class="author">Clive Cussler</p>
        </li>
        <li>
          <h3 class="title">Il dio del fiume</h3>
          <p class="author">Wilbur Smith</p>
        </li>
      </ul>
    </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>
lo script.js cambia così, estraendo l'inizilizzazione di list.js:
codice:
function initData() {
  const url = "https://www.mattepuffo.com/api/book/get.php?t=fondazione";
  return {
    isLoading: false,
    items: [],
    getData() {
      this.isLoading = true;
      fetch(url)
          .then((response) => response.json())
          .then((data) => {
            console.log(this);
            this.items = data.books;
            this.isLoading = false;




          });
    }
  }
}


const options = {
  valueNames: ['title', 'author']
};
new List('books', options);