Syncing Larvel Debugbar to Vue's UI

Question

We are making an axios call that pulls in a gigantic object which is used to render a very lengthy UI using Bootstrap Vue.

The issue is that the UI continues to be rendered well after the axios call has been received.

Is there a way to check if everything is done rendering in Vue? The mounted hook does not work here.

---

More context:

The Laravel Debugbar gives me the best feedback here. When #6 AJAX is done, I know that the UI is done rendering. But how I can sync Laraven's debugbar with Vue's hooks?

Answer 1

There is another lifecycle hook in vue beside mounted

The updated lifecycle hook is fired everytime a component reactive property changes and the virtual dom is updated.

To react to virtual dom changes inside the updated hook you can use nextTick()