I am using Alpinejs' $watch() on a given property inside multiple x-data blocks to call htmx.ajax with a custom handler whenever that property changes. Here is a snippet:

HTML:

<div x-data="{profiles:[]}">
  <div x-data="..." x-init="$watch('profiles', val=>onProfilesChanged())">...</div>

  <div x-data="..." x-init="$watch('profiles', val=>onProfilesChanged())">...</div>

  <div x-data="..." x-init="$watch('profiles', val=>onProfilesChanged())">...</div>

  <div>
  <!-- profiles modified here in response to user input -->
  ...
  </div>
</div>

Javascript:

function onProfilesChanged() {
  htmx.ajax('GET', ..., {'handler': (evt,response)=>{...}});
}

Debugging in the browser I can see onProfilesChanged being called as expected (3 times), but only 2 network requests are sent and the callback handler is then only executed twice . The requests seem to correspond to the first and last call, and everything in-between is somehow lost (tried with more $watch() callbacks). The behavior is the same on both Firefox and Chromium so I doubt it is a browser limitation, but I couldn't find anything in the htmx documentation concerning the maximum number of Ajax requests that can be queued.

I am at a total loss here, any insight into what might be going on would be greatly appreciated. Thanks!

Edit: the problem also happens when using htmx.ajax() inside a for loop, so this really does seem to be on the htmx side. There is an hx-sync tag to set the queue behavior for hx-get/post.. tags, but doesn't seem to work with the JS API.