title: Vuetify Navigation Drawer doesn't show with Vuex
body: <p>I am trying to get a Vuetify navigation drawer to open up on click of a hamburger menu. So far I've got an app component with two child components, <code>&lt;navbar/&gt;</code> and <code>&lt;drawer/&gt;</code>. </p>
  
  <pre><code>&lt;template&gt;
     &lt;v-app&gt;
       &lt;navbar/&gt;
       &lt;drawer v-show='showSideBar'/&gt;
       &lt;router-view&gt;&lt;/router-view&gt;
     &lt;/v-app&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
    import { mapState, mapActions, mapGetters } from 'vuex';
    import Navbar from '@/_components/Navbar/Navbar';
    import Drawer from '@/_components/Drawer/Drawer';
  
    export default {
      name: "app",
      computed: {  
        ...mapGetters('navbar', {
          showSideBar: 'g_sideBarOpen',
        })
      },
      components: {
        Navbar,
        Drawer,
      }
    };
  &lt;/script&gt;
  </code></pre>
  
  <p>Navbar.vue:</p>
  
  <pre><code>&lt;template&gt;
      ...
      &lt;v-toolbar-side-icon 
        :ripple='false'
        @click.stop='toggleSideBar'
      &gt;&lt;/v-toolbar-side-icon&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
    import { mapState, mapActions } from 'vuex';
  
    export default {
      data: () =&gt; ({
        items: [
          { 
            title: 'Profile',
            url  : '/profile',
          },
          { 
            title: 'Logout',
            url  : '/login',
          },
        ],
      }),
      components: {
        Logo,
      },
      computed: {
        ...mapState({
          account: state =&gt; state.account,
        }),  
      },
      methods: {
        ...mapActions('navbar', [
          'toggleSideBar',
        ]),
      }
    }
  &lt;/script&gt;
  </code></pre>
  
  <p>Drawer.vue:</p>
  
  <pre><code>&lt;template&gt;
    &lt;v-navigation-drawer absolute temporary&gt;
      &lt;v-list class="pa-1"&gt;
        &lt;v-list-tile avatar&gt;
          &lt;v-list-tile-avatar&gt;
            &lt;img src="https://randomuser.me/api/portraits/men/85.jpg"&gt;
          &lt;/v-list-tile-avatar&gt;
  
          &lt;v-list-tile-content&gt;
            &lt;v-list-tile-title&gt;John Leider&lt;/v-list-tile-title&gt;
          &lt;/v-list-tile-content&gt;
        &lt;/v-list-tile&gt;
      &lt;/v-list&gt;
  
      &lt;v-list class="pt-0" dense&gt;
        &lt;v-divider&gt;&lt;/v-divider&gt;
  
        &lt;v-list-tile v-for="item in items" :key="item.title"&gt;
          &lt;v-list-tile-action&gt;
            &lt;v-icon&gt;{{ item.icon }}&lt;/v-icon&gt;
          &lt;/v-list-tile-action&gt;
  
          &lt;v-list-tile-content&gt;
            &lt;v-list-tile-title&gt;{{ item.title }}&lt;/v-list-tile-title&gt;
          &lt;/v-list-tile-content&gt;
        &lt;/v-list-tile&gt;
      &lt;/v-list&gt;
    &lt;/v-navigation-drawer&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
    export default {
      data: () =&gt; ({
        items: [
          {
            title: "Profile",
            url: "/profile"
          },
          {
            title: "Logout",
            url: "/login"
          }
        ]
      })
    };
  &lt;/script&gt;
  </code></pre>
  
  <p>My <code>navbar.module.js</code> is as follows:</p>
  
  <pre><code>const state = {
    sideBarOpen: false,
  };
  
  const getters = {
    g_sideBarOpen(state) {
      return state.sideBarOpen
    }
  };
  
  const actions = {
    toggleSideBar({ commit }) {
      commit('toggleSideBar');
    },
  };
  
  const mutations = {
    toggleSideBar(state) {
      state.sideBarOpen = !state.sideBarOpen;
    }
  };
  
  export const navbar = {
    namespaced: true,
    state,
    actions,
    getters,
    mutations,
  };
  </code></pre>
  
  <p>Looking at the Vue/Vuex devtools, I can tell that the Vuex portion of things is working correctly and state correctly updates to reflect that <code>sideBarOpen</code> is either false or true.</p>
  
  <p>When I click the hamburger and verify that sideBarOpen is true, and inspect the DOM, it appears to me that the <code>transform: translateX(-300px)</code> style doesn't change at all, and in fact when I remove that property I can see the drawer move correctly into view. </p>
  
  <p><a href="https://i.stack.imgur.com/XG90y.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XG90y.png" alt="vuetify drawer"></a></p>
  
  <p>I can't figure out for the life of me what the issue is, but I feel like it's something simple. Has anybody run into a similar issue?</p>
  
  <p>*Edited to include Navbar.vue</p>