vue.jsのコンポーネント、あまりありがたみを感じられない

コンポーネントという機能があり、これは強力そうだなー、って感じではあるのですが、いざやってみるとこんな感じで。

<div id="demo1">

    <input type="text" v-model="message">
    <sample-component v-bind:msg="message"></sample-component>

    <input type="text" v-model="message2">
    <sample-component v-bind:msg="message2"></sample-component>

</div>

// こっちが子
var SampleComponent = Vue.extend({
    template: `<div> {{msg}}</div>`,
    props: ['msg']
})
 
// これが親
var demo = new Vue({
  el: "#demo1",
  data: {
      message: '',
      message2: ''
  },
  components: {
    'sample-component': SampleComponent
  }
})

どうもなんかデータの受け渡しが面倒になっただけで何のありがたみも感じられない。

分ければ分けるほど物事が複雑になって分かりにくくなる。

ウルトラマンX ウルトラ怪獣X 09 ゴメス(S)