title: Vue.js Two-Way sync Data Binding using vue-property-decorator
body: <p>I'm using Vue.js with TypeScript and the <code>vue-property-decorator</code>. I'd like to perform some two-way data binding between a parent and child component. Here is a simple idea of what I'm trying to do:</p>
  
  <h2>Parent Component</h2>
  
  <pre><code>&lt;template&gt;
    &lt;progress :is-loaded.sync="isLoaded"/&gt;
  &lt;/template&gt;
  
  @Component
  export default class ParentComponent extends Vue {
    get isLoaded() { return Store.getters["isLoaded"]; }
    set isLoaded(value: boolean) { Store.commit("isLoaded", value); }
  }
  </code></pre>
  
  <h2>Child Component</h2>
  
  <pre><code>&lt;template&gt;
   &lt;progress :value="_value" min="0" max="100"&gt;&lt;/progress&gt;
   {{_isLoaded}}
  &lt;/template&gt;
  
  @Component
  export default class ChildComponent extends Vue {
    @Prop()
    public isLoaded: boolean;
  
    public _isLoaded: boolean;
    public _value: number;
  
    public mounted() {
      this._isLoaded = this.isLoaded;
      this._value = this.value;
    }
  
    @Watch("isLoaded")
    public onIsLoadedChanged() {
      if (!isLoaded) {
        // Animate _value from 0 to 100.
        this._isLoaded = true;
        this.$emit("update:isLoaded", this._isLoaded);
      }
    }
  }
  </code></pre>
  
  <p>Do I really have to use two fields <code>isLoaded</code> and <code>_isLoaded</code> as well as use <code>this.$emit</code> with a magic string of <code>update:isLoaded</code>? All of this syntax seems very verbose, is there a simpler way? Is there some way to encapsulate some of this?</p>