title: Observe Vue.js store boolean change inside component
body: <p>I have a vue.js store that holds a boolean value and I need to detect when this changes inside a component. When userEnabled changes I need to call a method inside the component. I don't need to compute a new value.</p>
  
  <p>My question is should I be using <strong>'watch'</strong> for this or is there a more efficient way? If so, should I be configuring the watch inside 'mounted' and what about unwatch?</p>
  
  <p><strong>store.js</strong></p>
  
  <pre><code>import Vue from 'vue';
  import Vuex from 'vuex';
  
  Vue.use(Vuex);
  
  export const store = new Vuex.Store({
      state : {
          userEnabled: false,
      }
  });
  </code></pre>
  
  <p><strong>user.vue</strong></p>
  
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;div id="user"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
      export default {
          watch: {
              'this.$store.userEnabled': function() {
                  console.log('test');
              }
          },
          mounted: function() {
              this.$store.watch( state =&gt; state.userEnabled, (newValue, oldValue) =&gt; {
                  // call function!
              });
          }
      }
  &lt;/script&gt;
  </code></pre>