Vite hotloading shows inconsistent results. Why

I have a Vite + Typescript + Vue 3 SPA using "script setup". The app uses Urql to query a GrapgQL endpoint.

I have a situation where query works and displays rows only after the component with the component is hotloaded.

Sequence of events:

1. load app with http://localhost:4000 in my browser. The page is loaded fine, but the data from the query is 'undefined'. Loading indicator shows momentarily, but result.data.value is undefined
2. reload the page - no change, Loading indicator shows momentarily, but result.data.value is undefined
3. save the component (Ctrl + s) in VS Code - same result as for 1 and 2.
4. make a small inconsequential change to the components code, and save it. (I change a comment) The component is hotloaded according to the console, The Loading indicator does not show but this time result.data.value has the expected two elements and the page displays them.
5. reload the page - once again the page is loaded but the query results are undefined.

The code can be seen in github: here

/src/components/TodoPrivateList.vue is where the data is returned (line 29). At line 71, it uses a child component TodoItem.vue to render each Todo.

I can now see, using Vue DevTools that the data is always retrieved, but the Todos are not rendered. It is only when I force a hot load of the TodoPrivateList.vue (by updating one of its comments) that the Todos are rendered.

So I now agree with @wittgenstein that this seems like a Reactivity issue. But I am not yet sure what to do.

Thanks in advance

Issue had nothing to do with Vite.

Issue was caused by not awaiting the response from the graphql query.

Implemented "Suspense" option in the parent component. (Vue 3 experemental option) and added 'await' to the query. Code pushed to GitHub.