[question] After upgrading to vue 3, computed value is only updating on browser refresh. Is this expected?

[sbadisa]

@ilikerobots,

First of all, thanks for this awesome project and the supporting articles, it's all incredibly helpful!

I was (with some effort as I'm new to Vue) able to upgrade to Vue 3. Everything seems to work fine except that the computed message value on the CounterBanner.vue component does not update in realtime. It only updates when I manually refresh the browser.

This appears to be a bug? Any help would be great.

[ilikerobots]

@sbadisa I have not updated the cookie cutter to work with Vue 3 yet. However, I've written up the general changes required for integrating Vue 3 and Django, check out #13 for info.

[sbadisa]

Thanks for the reply. I did follow the migration guide and everything else works apart from the computer property which does not update with the counter value unless I refresh the page.

Sent from my iPhone

On 8 Jun 2021, at 14:28, Mike Hoolehan @.***> wrote:



@sbadisahttps://github.com/sbadisa I have not updated the cookie cutter to work with Vue 3 yet. However, I've written up the general changes required for integrating Vue 3 and Django, check out #13https://github.com/ilikerobots/cookiecutter-vue-django/issues/13 for info.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://github.com/ilikerobots/cookiecutter-vue-django/issues/48#issuecomment-856767933, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AEKVSL3UCNOPTBVFW4LOKR3TRYLJTANCNFSM46JZEUGQ.

[sbadisa]

This was my mistake. In case it helps someone else, here's where I went wrong. I did this:

createAppInEl(Counter, createSharedStore({
    fruit: FruitModule,
    persistedPaths: ['count','activeFruit']
}),"#app")

createAppInEl(CounterBanner, createSharedStore({
    fruit: FruitModule,
    persistedPaths: ['count','activeFruit']
}), "#counter_banner")

instead of this:

let store = createSharedStore({
    fruit: FruitModule,
    persistedPaths: ['count','activeFruit']
})

createAppInEl(Counter, store,"#app")

createAppInEl(CounterBanner, store, "#counter_banner")

which meant that the CounterBanner component was not updating in-step with the CounterDisplay, although state was mutating as expected.