title: What is the difference between v-model and .sync when used on a custom component
body: <p>I don't understand the difference between v-model and .sync used on a component.</p>
  
  <pre><code>&lt;my-component v-model="myVar"&gt;
  </code></pre>
  
  <p>V-model is a shorthand for binding a variable (myVar) to the component property 'value' and listening to the 'input' event emitted from the component to update the variable 'myVar'. </p>
  
  <pre><code>&lt;my-component v-bind:prop1.sync="myVar"&gt;
  </code></pre>
  
  <p>.sync is a shorthand for binding a variable (myVar) to a component property ('prop1' in this case) and listening to the 'update:prop1' event emitted from the component to update the variable 'myVar'.</p>
  
  <p>I know that by default v-model only works with the 'value' property and the 'input' event but even that can be customized using the 'model' option in the component. </p>
  
  <p>Would be nice if anybody could explain the difference to me or when to use what.</p>
  
  <p>Here is an <a href="https://jsfiddle.net/2pcg0oxf/2/" rel="noreferrer">example</a> where I used the same component in three different ways:
  1) manual binding + event listening
  2) .sync
  3) v-model</p>