title: Watching and tracking state changes with Vuex inside child components
body: <p>This is more a "which method should I use" question, rather than a how to.</p>
  
  <p>I have the following in my <code>Vuex.Store()</code> instance:</p>
  
  <p><code>store.js</code>:</p>
  
  <pre><code>export default new Vuex.Store({
    state: {
      acceptedTermsAndConditions: false
    },
  })
  </code></pre>
  
  <p>From various components I'm emitting an event which sets <code>this.$store.state.acceptedTermsAndConditions</code> to <code>true</code> or <code>false</code>, dependent on different User inputs.</p>
  
  <p>However, in my component I would set the checked value of a "Accepts T&amp;Cs" checkbox to this value, something like this:</p>
  
  <p><code>components/Component.Vue</code>:</p>
  
  <pre><code>data () {
      return {
          form: {
              checkboxTermsAndConditions: this.$store.state.acceptedTermsAndConditions
          }
      }
  }
  </code></pre>
  
  <p>I'm just not sure what method handles this? Does a solution require a <code>getter</code>? If not, what is the best way to watch for state changes and set data values accordingly? </p>