Vue.js에서 부모님 ViewModel에component를 걸어서 데이터 공유

어느 페이지에 부모님 View Model이 있는데 부모님 View Model 부하의component로 그 녀석의 Data Model을 구해보라고 디자인해 봤어요.
다음과 같은 느낌을 구성한다

View 모델의 데이터에 데이터 모델을 넣고 component에서 그 값의 느낌을 읽는다.
소스 파일은 다음과 같습니다.

<h1>Component Test</h1>
<div class="main">
    {{title}}
    <my-component-one data="{{$data}}"></my-component-one>
    <my-component-two data="{{$data}}"></my-component-two>
    <button v-on="click:output">
        check
    </button>
</div>
<div class="output">
</div>
<my-component></my-component>

var dataModel = {
    title: "Title",
    one: "component1",
    two: "component2"
};

var MyComponent_one = Vue.extend({
    template: '<p v-on="click:rewrite">{{data.one}}</p>',
    props: ['data'],
    methods:{
        rewrite: function(){
            this.data.one = "rewrite";
        }
    }
});

var MyComponent_two = Vue.extend({
    template: '<p v-on="click:rewrite">{{data.two}}</p>',
    props: ['data'],
    methods:{
        rewrite: function(){
            this.data.two = "rewrite";
        }
    }
});

var mainViewModel = new Vue({
    el: ".main",
    data: dataModel,
    methods: {
        output: function(){
            $('.output').html(this.$data.one + " " + this.$data.two);
        }
    },
    components: {
        "my-component-one": MyComponent_one,
        "my-component-two": MyComponent_two
    }
});

문자열을 클릭하면 데이터가 바뀝니다.check 버튼을 사용하여 Data Model의 내용을 확인하면 덮어쓰기를 알 수 있습니다.

이 디자인이 좋은지 모르겠지만 어쨌든 하고 싶은 일이 생겼어요.

jsfiddle