text: Q:
  
  Vue.js data in child instances
  
  How can i include data option in child instances in Vue.js?
  <html>
      <body>
          {{ foo }}
  
          <script>
              var root = new Vue({
                  el: 'body'
              });
  
              var child = new Vue({
                  parent: root,
                  data: function() {
                      foo: 'bar'
                  }
              });
          </script>
      </body>
  </html>
  
  Here nothing is getting printed in the body. But if i add the foo variable inside the root instance, it's getting printed. How to make the data option work for child instances?
  
  A:
  
  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'
  });
  
  