Livewire wire:init doesn’t async load individual elements for some reason. My whole Livewire component is my page, and some components of my dashboard like statistics can be loaded after the page has loaded, except when calling different functions using wire:init the functions are coupled in one update request and I’d like two. I tried added wire:key but this does nothing:

<div class="col-span-12 lg:col-span-3">
  <article wire:init="fetchApplicationsCount" class="grid gap-y-2 bg-white dark:bg-gray-800 shadow-sm rounded-lg p-6">
    <h6 class="text-sm font-medium text-gray-500 dark:text-gray-400">Total applications</h6>

    <div wire:loading.delay.long class="animate-pulse rounded-md bg-slate-200 h-9 w-44"></div>
    <div wire:loading.remove.delay.long class="text-3xl font-semibold tracking-tight text-gray-950 dark:text-white">
      <span x-data x-tooltip.raw="{{ $applicationsCountFormatted }}">
        {{ $applicationsCountAbbreviated }}
      </span>
    </div>
  </article>
</div>
<div class="col-span-12 lg:col-span-3">
  <article wire:init="fetchApplicationUsageCount" class="grid gap-y-2 bg-white dark:bg-gray-800 shadow-sm rounded-lg p-6">
    <h6 class="text-sm font-medium text-gray-500 dark:text-gray-400">Past 21 day usage</h6>

    <div wire:loading.delay.long class="animate-pulse rounded-md bg-slate-200 h-9 w-44"></div>
    <div wire:loading.remove.delay.long class="text-3xl font-semibold tracking-tight text-gray-950 dark:text-white">
      <span x-data x-tooltip.raw="{{ $applicationsUsageCountFormatted }}">
        {{ $applicationsUsageCountAbbreviated }}%
      </span>
    </div>
  </article>
</div>