title: V-snackbar does not display when I update the Vuex state
body: <p>I can't seem to figure out why my <code>&lt;v-snackbar&gt;</code> component does not show when I update the Vuex state.</p>
  <p>My setup is very simple: I have a snackbar in Snackbar.js, which is listening for changes in the state.</p>
  <p>This Snackbar.js is imported as a child component in App.vue so that its global.</p>
  <p>Next, I have a Test.vue which has a simple button. I expect that when I click the button, the State should be updated and the snackbar should render, but it doesn't.</p>
  <p><em>By inspecting the Snackbar component in the Chrome Vue Devtools, I could see that the data actually makes it to the store, but somehow doesn't update the reactive props in Test.vue</em>
  <a href="https://i.stack.imgur.com/6xzPG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6xzPG.png" alt="enter image description here" /></a></p>
  <p>Here are the relevant codes:</p>
  <hr />
  <p><strong>Snackbar.vue</strong></p>
  <pre class="lang-js prettyprint-override"><code>&lt;template&gt;
    &lt;v-snackbar v-model=&quot;show&quot; :top=&quot;top&quot; multi-line rounded=&quot;pill&quot;&gt;
      {{ text }}
      &lt;v-btn text @click.native=&quot;show = false&quot;&gt;
        &lt;v-icon&gt;close&lt;/v-icon&gt;
      &lt;/v-btn&gt;
    &lt;/v-snackbar&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import { mapState } from 'vuex'
  export default {
    data () {
      return {
        show: false,
        text: '',
        top: true
      }
    },
    computed: {
      ...mapState(['snackbar'])
    },
    created: () =&gt; {
      this.unwatch = this.$store.watch(
        // watch snackbar state
        (state, getters) =&gt; getters.snackbar,
        () =&gt; {
          const text = this.$store.state.snackbar.text
          if (text) {
            this.show = true
            this.text = text
          } 
        }
      )
    },
    beforeDestroy () {
      this.unwatch()
    }
  }
  &lt;/script&gt;
  </code></pre>
  <hr />
  <p><strong>App.vue</strong></p>
  <pre class="lang-js prettyprint-override"><code>&lt;template&gt;
    &lt;v-app&gt;
      &lt;v-main&gt;
        &lt;!-- try to set a global snackbar --&gt;
        &lt;Snackbar/&gt;
        &lt;router-view/&gt;
      &lt;/v-main&gt;
    &lt;/v-app&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import Snackbar from '@/components/Snackbar'
  
  export default {
    name: 'App',
    components: {
      Snackbar
    }
  }
  &lt;/script&gt;
  
  </code></pre>
  <hr />
  <p><strong>Test.vue</strong></p>
  <pre class="lang-js prettyprint-override"><code>&lt;template&gt;
      &lt;v-btn @click=&quot;passData&quot;&gt;Show snackbar&lt;/v-btn&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import { mapActions } from 'vuex'
  export default {
    name: 'Test',
    data: () =&gt; ({
      //
    }),
    computed: {},
    methods: {
      ...mapActions([
        'setSnackbar'
      ]),
      passData () {
        this.setSnackbar({
          text: 'Simple message',
          isActive: true
        })
      }
    }
  }
  &lt;/script&gt;
  </code></pre>
  <hr />
  <p><strong>Store/index.js</strong></p>
  <pre class="lang-js prettyprint-override"><code>import Vue from 'vue'
  import Vuex from 'vuex'
  
  Vue.use(Vuex)
  
  export default new Vuex.Store({
    state: {
      snackbar: {
        isActive: false,
        text: ''
      }
    },
    getters: {
      snackbar (state) {
        return state.snackbar
      }
    },
    mutations: {
      populateSnackbar (state, payload) {
        state.snackbar.isActive = payload.isActive
        state.snackbar.text = payload.text
      }
    },
    actions: {
      setSnackbar (context, payload) {
        context.commit('populateSnackbar', payload)
      }
    }
  })
  </code></pre>