title: Changing the state of Vuex variable directly from template
body: <p>If I had, for example sake, a Vuex setup as follows:</p>
  
  <pre><code>import Vue from 'vue'
  import Vuex from 'vuex'
  
  Vue.use(Vuex)
  
  export default new Vuex.Store({
    state: {
      dialog: false
    },
    mutations: {
      openTermsAndConditions (state) {
        state.dialog = true
      }
    },
    actions: {
  
    }
  })
  </code></pre>
  
  <p>I can emit an event which mutates the dialog variable, however, it appears that nothing is happening because my template is as follows:</p>
  
  <pre><code>&lt;v-dialog v-model="dialog" transition="dialog-bottom-transition"&gt;
  </code></pre>
  
  <p>So, my question is, how do I bind the store value for dialog rather than a locally defined variable?</p>
  
  <p>I've tried the following, but to no luck:</p>
  
  <pre><code>&lt;v-dialog v-model="$this.store.dialog" transition="dialog-bottom-transition"&gt;
  </code></pre>
  
  <p>...and...</p>
  
  <pre><code>&lt;v-dialog v-model="$this.state.dialog" transition="dialog-bottom-transition"&gt;
  </code></pre>
  
  <p>What exactly am I missing from this?</p>