ciao!

mi sono trovato meglio con alpine.js.
ho avuto un attimo di difficoltà a capire il funzionamento generale, ma mi sembra che ci sono.

vi lascio un esempio per i posteri:
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">


    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
  </head>


  <body>
    <div x-data="{ title: setHeader() }">
      <div x-html="title"></div>
    </div>


    <hr>


    <div x-data="initData()" x-init="getData()">
      USERS LIST
      <ul>
        <template x-for="item in items" :key="item.id">
          <li>
            <span class="" x-text="item.titolo"></span>
          </li>
        </template>
      </ul>
    </div>


    <script>
      function setHeader() {
        return '<h1>HEADER</h1>';
      }


      function initData() {
        const url = "https://www.mattepuffo.com/api/blog/articoli/get.php?last=10";
        return {
          isLoading: false,
          items: [],
          getData() {
            this.isLoading = true;
            fetch(url)
                .then((response) => response.json())
                .then((data) => {
                  this.items = data.articoli;
                  this.isLoading = false;
                });
          }
        }
      }
    </script>


  </body>


</html>