I have a fairly complex application, with a few levels of components, and I haven’t been able to replicate this in CodePen, so presume it’s something I’m doing. The component tree is like this:

and the Vuex state contains a setting for whether certain items in toolbar menu should be visible. It’s an object like this:

To show the issue, I’ve included the Store Getter toolbarMenu
, and put these 2 lines into the relevant templates. In Default.vue (which provides the QToolbar), and Page.vue (which provides the QTabs at the bottom of the component tree), I have:
<pre>{{toolbarMenu.select}}</pre>
To begin with, all is good:

The problem is when this state is updated via an action within QPage triggered from the QTabs @input
event. I can see via devtools that the Vuex state is indeed changed (all those true
s become false
), and the value in QPage updates, but the value in QToolbar does not:

If I make a simple source code change when running via quasar dev
, the HMR update brings the QToolbar value in line. Similarly, if I pull all this code into a single file in CodePen, it works exactly as it should. So I’m a bit stumped—what might I have done that makes this getter non-reactive in the toolbar?