Vuex and Vue SSR Lifecycle

I have a conceptual question about the Vue lifecycle when in SSR mode.
I am trying to implement a Vuex state that is shown by a Parent component and is updated by the Child component upon creation. However, the Parent component is rendered on server-side before being updated by the child component. It only gets updated after the child component gets mounted on client side, resulting in a few seconds lag with the incorrect (the initial) information.

You can see the behavior here:
https://codesandbox.io/s/vuex-module-test-dmoe6?file=/components/HelloWorld.vue

Is this the expected behavior? How can I make sure that Vuex is updated before sending the rendered page to the browser?

This is expected as described in the Vue Server-Side Rendering docs Component Lifecycle Hooks section.

Since there are no dynamic updates, lifecycle hooks such as mounted or updated will NOT be called during SSR and will only be executed on the client. The only hooks that are called during SSR are beforeCreate and created

You’ll likely need to rely on those last two create-related hooks mentioned.

Here’s another old post that has a diagram that might be helpful.