[Vuejs]-Vue.js data in child instances

Following is the syntax is to have data attribute in a child vue instance:

const Foo = { 
    data: function () {
    return {
        foo: "I am Foo"
      }
    },
    template: '<div>foo: {{foo}}</div>' 
}

and you can use this data property only in the template of child instance. You can see the whole working demo in this fiddle.

Another style of creating a vue component and using it can be found here, with JS code.

Vue.component('child', {
  data () {
    return {
      foo: 'bar'
     }
  },
  template: '#foo'
});

var vm = new Vue({
  el: '#root'
});