title: Data binding in vue not updating
body: <p>I have this code in two locations of a page (the post code needs to be displayed twice):</p>
  
  <pre><code>        &lt;store-text-field
              :store_id="clonedStore.id"
              relation="address"
              field="post_code"
              @value-updated="postCodeUpdated"
              :value="clonedStore.address.post_code"/&gt;
  </code></pre>
  
  <p>Within the component the <code>post_code</code> can be changed and the value passed back to the parent via the <code>value-updated</code> event. </p>
  
  <p>The event code:</p>
  
  <pre><code>            postCodeUpdated(value) {
                  console.log('post code updated to: ' + value)
                  this.clonedStore.address.post_code = value;
              }
  </code></pre>
  
  <p>Every thing works fine, except the second component does not update with a new value if the <code>post_code</code> is changed in the other. </p>
  
  <p>I expected the value to change as it is binded to <code>this.clonedStore.address.post_code</code> which is changed when the event is detected.</p>
  
  <p>EDIT: </p>
  
  <pre><code>        data() {
              return {
                  clonedStore: {
                      address: {
                          post_code: ''
                      }
                  },
                  showStoreNameInput: false,
              }
          },
  </code></pre>