Flowbite multi-level dropdown does not display with external resource

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 https://github.com/themesberg/flowbite/issues/86 where the component is already generated before the actual resource to fill the dropdown menu is loaded 🤔

Thank you for your help 🙏

Start with the linked Flowbite multi-level dropdown documentation and compare the two JSFiddles, especially the difference between inline and externally fetched JSON. Check whether Flowbite initializes the generated dropdown before the Alpine.js fetch completes; done means both dropdown levels render from the external resource.