title: Vue two way prop binding
body: <p>Below is my current structure (which doesn't work).</p>
  <p>Parent component:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
  &lt;field-input ref=&quot;title&quot; :field.sync=&quot;title&quot; /&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import Field from './input/Field'
  export default {
    components: {
      'field-input': Field
    },
    data() {
      return {
        title: {
          value: '',
          warn: false
        }
      }
    }
  }
  &lt;/script&gt;
  </code></pre>
  <p>Child component:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
  &lt;div&gt;
    &lt;input type=&quot;text&quot; v-model=&quot;field.value&quot;&gt;
    &lt;p v-bind:class=&quot;{ 'is-invisible' : !field.warn }&quot;&gt;Some text&lt;/p&gt;
  &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    props: ['field']
  }
  &lt;/script&gt;
  </code></pre>
  <p>The requirements are:</p>
  <ul>
  <li>If parent's data <code>title.warn</code> value changes in parent, the child's <code>class</code> bind should be updated (<code>field.warn</code>).</li>
  <li>If the child's <code>&lt;input&gt;</code> is updated (<code>field.value</code>), then the parent's <code>title.value</code> should be updated.</li>
  </ul>
  <p>What's the cleanest working solution to achieve this?</p>