Instances of Vue components and multiple API requests

I have several components which I'm using to build up a fairly complex multi-step form on an area of my app. Some of these components are used multiple times in the form, i.e., Country selection, Honorific selection etc. The options / values for these select components are stored in my database and retrieved via an API request in order to pre-populate the component when it's instantiated.

I've used these components to make it easy to scaffold forms quickly and also to keep things as DRY as possible, but since each component performs an XHR GET to fetch the list of values to pre-populate itself, the more times I add the component to the form, the more API requests are performed and I'm worried about getting to the point where I'm performing dozens of API requests for the same information (see https://i.imgur.com/EAIYAVD.png)

I have considered taking the model from the first instance of a component and caching it with any subsequent component instances preferentially cloning their models from the cached version rather than performing an additional API request, however, for some fields, I can't assume that the cached model from the first instance request is always current, since the database values can change as other users update lists in other areas of the app.

Also, I can see potential timing issues where subsequent instances of the component may try to hit a cached store of values before the XHR request from the first component has completed and end up having to perform an API request anyway, or worse end up with an empty model.

I guess I'm just wondering if there's a standard pattern or better methodology to use when using a component multiple times that needs to make API calls?

Thanks!