title: How to set data properties to value returned from Vuex getter
body: <p>I have a Vue component that will display data depending on what the user previously clicked on in a previous component. When they originally click, I set the 'current' index. Then when they get to the next page, I have a getter that will look in the data array and return the 'current' data. </p>
  
  <p>The component they are redirected to is a form that they can edit. I would like to be able to have the 'current' data be pre-populated. NOT as a placeholder but as the actual value so that they can edit it directly. </p>
  
  <p>The issue is I don't know how to set the values returned from the getter to the data function values so that they can be bound with v-model. </p>
  
  <p>HTML</p>
  
  <pre><code>&lt;input type="text" class="form-control" id="nickname1" v-model="name" name="name"&gt;
  &lt;input type="text" class="form-control" id="address1" placeholder="" v-model="address" name="address" &gt; 
  &lt;input type="text" class="form-control" id="city1" placeholder="" v-model="city" name="city" &gt; 
  </code></pre>
  
  <p>VUE</p>
  
  <pre><code>data: function() {
      return {
          name: this.currentArea.title,
          address: this.currentArea.address,
          city: this.currentArea.city,
          state: this.currentArea.state
      }
  },
  computed: {
      currentArea() { return this.$store.getters.currentArea }
  }
  </code></pre>
  
  <p>*this.currentArea.title and currentArea.title do not work. </p>
  
  <p>*if I bind the placeholder, the data displays correctly, so the getter function is returning currentArea correctly</p>