title: v-bind v-model or v-bind.sync?
body: <p>I dont understand what is the difference between <code>v-bind</code>, <code>v-model</code>and <code>v-bind.sync</code>?</p>
  <p>Maybe it's too late, but I can't tell the difference between <code>v-bind.sync</code>and <code>v-model</code> after reading the documentation.</p>
  <p><a href="https://v2.vuejs.org/v2/guide/components-custom-events.html#sync-Modifier" rel="nofollow noreferrer">Sync modifier</a></p>
  <p><a href="https://v2.vuejs.org/v2/guide/components.html#Passing-Data-to-Child-Components-with-Props" rel="nofollow noreferrer">Passing Data to Child Components with Props</a></p>
  <p><a href="https://v2.vuejs.org/v2/guide/components.html#Using-v-model-on-Components" rel="nofollow noreferrer">v-model</a></p>
  <h1>Example</h1>
  <p>I have the following component written in Typescript, using &quot;vue-property-decorator&quot;. I don't know how I can manage to update the <code>date</code> object passed into the component without having to write the event handling myself. If you ask me, it should work with the <code>v-model</code> and with the <code>v-bind.sync</code> bindings (and respective changes in the markup and decorator).</p>
  <h3>HTML</h3>
  <pre><code>&lt;Datepicker v-model=&quot;date&quot;/&gt;
  </code></pre>
  <h3>Typescript</h3>
  <pre><code>import { Component, Prop, Vue, Model } from &quot;vue-property-decorator&quot;;
  
  @Component({})
  export default class Datepicker extends Vue {
      @Prop()
      private label!: string;
      @Model()
      private date!: Date;
      private internalDate = new Date().toISOString().substr(0, 10);
      private menu = false;
  
      private onDateChanged() {
          const isoDate = this.date.toISOString();
          const newDate =
              this.internalDate + this.date.toISOString().substring(10);
          this.date = new Date(newDate);
      }
  }
  </code></pre>
  <p>Every time I change the <code>this.date</code> object, I get the warning:</p>
  <blockquote>
  <p>Avoid mutating a prop directly since the value will be overwritten
  whenever the parent component re-renders. Instead, use a data or
  computed property based on the prop's value. Prop being mutated:
  &quot;date&quot;</p>
  </blockquote>