title: Vuex: Sidebar is not Toggling with the value of a state
body: <p>I want to toggle Sidebar with a <code>true/false</code> value. I have stored this value in <code>Vuex</code>.</p>
  <p>Like this:</p>
  <pre><code>state: {
          sidebartoggle: false
      },
      mutations: {
          sidebartoggle(state, item) {
              state.sidebartoggle = item
          }
  }
  </code></pre>
  <p>Changing this value with a Click Event:</p>
  <pre><code>&lt;i class=&quot;fas fa-shopping-cart&quot; @click=&quot;changeSidebar&quot;&gt;&lt;/i&gt;
  
  data() {
          return {
              toggle: false
          }
      },
      methods: {
          changeSidebar() {
              console.log(&quot;Cart Clicked!&quot; + this.toggle);
              this.toggle = !this.toggle
              this.$store.commit('sidebartoggle', this.toggle)
          }
   }
  </code></pre>
  <p>Try to show the Sidebar like this:</p>
  <pre><code>&lt;div id=&quot;wrapper&quot; class=&quot;toggled&quot; v-if=&quot;this.$store.sidebartoggle&quot;&gt;
  All are working fine. this.$store.sidebartoggle this value is giving true/false also.
  </code></pre>
  <p>What is the problem?</p>