I’m having a very strange hard to debug problem using Vue 3 and the PrimeVue DataTable, where I am feeding data into a PrimeVue DataTable, which requires API calls for the column data and the row data. For some situations, an additional call needs to be made to get default column data, and other times, we use column data from elsewhere, so 1 less API call.

Scenario 1

If we make one Promise based API call for the data and nothing else, the data does not show, however, the “No Results” text in the DataTable is gone, so it appears to be trying to render?

Scenario 2

However, if we make 2 chained promise based API calls (Data and Columns) then the data appears as expected.

Breaking down the issue

I have further narrowed this down to simply wrapping the Scenario 1 call in a dummy Promise with a 100ms setTimeOut delay (To make sure its the timing rather than the extra default data fetched), and then the data shows as expected.

However, given that all the data for the table (column and row data) is reactive, the table should just render when it has it, regardless of race conditions, and just show “No Results” when it does not. The data structure for all resulting API calls is the same, I have compared this already, so its not that the table gets the data in an invalid format.

Unable to share code at this point due to not being able to reproduce it in smaller code sizes, and its too interconnected to other areas. I do understand breaking it down may show the problem, but have tried to break it down with no luck at reproducing.

Any suggestions for where I can look next for debugging / trial and error fault finding?