【Vue.js】コンポーネントの中でのdataの扱い方

<div id="app">
    {{ message }}
</div>

var app = new Vue({
  el:'#app',
  data:{
    message:"hello-world"
  }
})

<div id="app">
   <hello></hello>
</div>

Vue.component('hello',{
  template:'<p>{{message}}</p>',
  data:function(){
    return{
      message:"hello"
    }
  }
})  


var app = new Vue({
  el:'#app',
})