Vue 3 and Axios Loading State Issue

[rizypb]

Vue version

3.4.31

Link to minimal reproduction

https://github.com/riz007/vuetify-3-6-13-issue

Steps to reproduce

1. Set Up the Project

   Ensure your Vue 3 project is set up with Vuetify, Axios, and configured correctly with the provided Parent.vue, Child.vue, App.vue, and vite.config.js files.

2. Add Routing

   Set up Vue Router to navigate to the Parent component. Ensure you can navigate to the Parent component using router.push('/parent').

3. Navigate to Parent Page

   Use Vue Router to navigate to the Parent component by calling router.push('/parent').

4. Observe Loading State

   • When navigating to the Parent component, the isLoading state in the Parent component should be initially set to true.
   • The Child component should display a loading spinner (v-progress-circular) while isLoading is true.

5. Perform Data Fetch

   • The Parent component should make an HTTP request to fetch data using Axios when mounted.
   • After the data is successfully fetched, isLoading should be set to false.

6. Check Data Display

   • Once isLoading is false, the Child component should update to show the fetched data and display the message "Data loaded properly".

What is expected?

• Navigation: When navigating to the Parent component using router.push, the Child component should display a loading spinner while data is being fetched.
• Loading State: The loading spinner should be visible while isLoading is true.
• Data Display: After the data is fetched, isLoading should be set to false, and the Child component should display the fetched data along with the message "Data loaded properly".

What is actually happening?

• Navigation Issue: The Child component does not update the loading spinner correctly when navigating to the Parent component using router.push.
• Loading State: The loading spinner may not be displayed as expected when navigating to the Parent component.
• Data Display: The Child component might not show the fetched data correctly after isLoading is set to false, especially if the issue persists with router.push.

System Info

**Vuetify Version:** 3.6.13
**Vue Version:** 3.4.31
**Browsers:** Chrome 126.0.0.0
**OS:** Mac OS 10.15.7

Any additional comments?

• This behavior appeared only after bumping to Vuetify's latest version. Could be related to Vue 3's reactivity system but I am not sure.
• Wrapping the child component in a <div> should not be necessary for reactivity to work correctly.
• Further investigation is required to understand the root cause.

Feedback from Vuetify team

I have previously raised this issue to the Vuetify core team and @KaelWD replied me this:

• It's a vue bug, you can reproduce this without vuetify by making the root of App.vue a <Suspense>

[edison1105]

Let's track it in #11617 since it has a minimal reproduction without any 3rd party libs.

[Disservin]

@rizypb btw it would have been nice if you included the feedback from vuetifyjs/vuetify#20256 in your issue here instead of copy pasting the issue you submitted to vuetify

[rizypb]

Already added the feedback @Disservin