Cloudflare turnstile synchronized api calls

Question

I am trying to migrate form reCAPTCHA to Cloudflare turnstile. But I am running in to problems trying to validate synchronized calls.

My frontend is made in Vue. I have a service that have API methods in it that can be called for example:

// Create new put axios call
put({ url = null, data = null, headers = null } = {}) {
    return this.getAuthenticationToken().then((token) => {
        return apiClient.put(url, { ...data, ...{ token: token } }, headers);
    });
},

As you see I have a method getAuthenticationToken(). This will handle the Turnstile call. This is what it looks like:

getAuthenticationToken() {
    return new Promise((resolve) => {
        turnstile.ready(function () {
            turnstile.render('#cf-container', {
                'sitekey': 'MY_TOKEN',
                'callback': function (token) {
                    resolve(token);
                },
            });
        });
    });
},

And when i need to make an API call I can do as follow:

getAllBrands() {
  // Create api data
  const url = `/brands`;

  // Make api call
  ApiService.get({
    url: url,
  }).then((response) => {
    // Execute some code
  });
},

No this works fine until i make another call synchronized. The first call works just fine but the second call wont even get to the axios call in the service. I think this is because the first call to turnstile is not finished and it has to be finished before it can make a new call.