Flowbite multi-level dropdown does not display with external resource

[mlapeyre3]

I am working on a simple HTML page using Alpine.js and TailwindCSS (with Flowbite). I have to display a two-level Dropdown button (I followed this implementation from Flowbite) which leverages a simple .json input coming from an external resource.

My first test with the .json input defined directly in the page is working properly (see this JSFiddle) as the dropdown button shows the two levels of items.
However, as soon as I switched to an external .json resource, only the first level is displayed (see this JSFiddle)
My implementation of Alpine.js looks pretty simple though. I might have missed something with the x-data="..." or x-init"..."

const directoryApp = () => ({
    directoryNOK: {},
  fetchDirectory() {
    fetch('https://myjson.dit.upm.es/api/bins/aagg')
      .then(response => response.json())
      .then(data => this.directoryNOK = data);
  },
});

<ul x-data="directoryApp()" x-init="fetchDirectory()" aria-labelledby="multiLevelDropdownButton">
  <template x-for="folder in directoryNOK.folders" :key="folder.id">
    <li>
      <a x-show="!folder.pages.length" href="#" x-text="folder.name"></a>
      <div x-show="folder.pages.length" x-id="['doubleDropdownButton', 'doubleDropdown']">
        <button :id="$id('doubleDropdownButton')" :data-dropdown-toggle="$id('doubleDropdown')" data-dropdown-placement="right-start" type="button"><div x-text="folder.name"></div></button>
        <div :id="$id('doubleDropdown')" class="hidden">
          <ul :aria-labelledby="$id('doubleDropdown')">
            <template x-for="page in folder.pages" :key="page.id">
              <li>
                <a x-text="page.name" :href="page.url"></a>
              </li>
            </template>
          </ul>
        </div>
      </div>
    </li>
  </template>
</ul>

I think this is similar to #86 where the component is already generated before the actual resource to fill the dropdown menu is loaded 🤔

Thank you for your help 🙏