I have a list of customer objects being pulled from an API which I’m trying to provide to my entire app via provide/inject. Here is the snipped from app.js:

  const customers = ref([])
  provide('customers', customers)

  api.get("customers").then(({ json }) => {
    customers.value = Array.from(json, customer => new Customer(customer))
  })

This works fine for populating templates, but in the condition that the first page visited tries to read this data in it’s setup, it comes back empty.

For example the following snippet from a component’s setup script:

  const customers = inject('customers')

  const customer = ref(null)
  customer.value = customers.value.filter(customer => customer.id === route.params.customer_id)[0]

The only solution I can think of is to also provide/inject the promises and await them in the components, but this doesn’t sound like a very good solution. Is there another way that I’m missing?