I'm working through the guide for learning vue.js, got to the section on props, and ran into a question.

I understand that child components have isolated scops and we use the props configuration to pass data into it from the parent, but when I try it out I can't get it to work.

I have the example I'm working on up on js fiddle:

var vm = new Vue({

   el: '#app',

   // data from my parent that I want to pass to the child component

   data:{

       greeting: 'hi'

   },

   components:{

        'person-container':{



            // passing in the 'greeting' property from the parent to the child component

            props:['greeting'],



            // setting data locally for the child

            data: function (){

                return { name: 'Chris' };

            },



            // using both local and parent data in the child's template

            template: '<div> {{ greeting }}, {{ name }}</div>'

        }

   }

});

When I run the above code, my output is only:

, Chris

The data local to the child component renders fine, but the passed in parent's data is either not coming through or is not properly rendering.

I don't see any errors in the javascript console and the template is rendering.

Am I misunderstanding how the props are supposed to be passed in?