[Vuejs]-Data not populating in Vue app

You can use lifecycle hook: updated

Called after a data change causes the virtual DOM to be re-rendered and patched.

The component’s DOM will be in updated state when this hook is called, so you can perform DOM-dependent operations in this hook. However, in most cases you should avoid changing state in this hook, because it may lead to an infinite update loop.

This hook is not called during server-side rendering.

You can refer to following lifecycle diagram on what event will called when.

Use computed instead of created in CreatedResources, just like in the parent component. EDIT: Since we have to use vuefire’s $bindAsArray, which makes it hard to declare createdResources as computed, watch userInfo and put what’s inside created there.

explanation:

created is invoked only once in a component’s lifetime, while computed re-evals every time its involved component properties change (and since vuex suggest use computed too, computed must also detects state changes). Also try putting the log in computed in the parent component, it should log the value when userInfo state changes.

As the doc explains, computed watches properties changes, which can also be achived with watch, with one thing superior: it caches the computed values until the dependencies change, while watch evals every time you ask for the computed value.

optional improvement:

Putting db... in the parent and pass the server-side-fetched data to the child would be better since the child serves as a generic displayer and should receive ready-to-display-in-view data. (it has no idea what the data means, but only cares if the data matches its predefined structure)