title: Understanding props in vue.js
body: <p>I'm working through the guide for learning vue.js, got to the section on props, and ran into a question. </p>
  
  <p>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. </p>
  
  <p>I have <a href="http://jsfiddle.net/cschmitz81/k8mu1vhx/">the example I'm working on up on js fiddle</a>:</p>
  
  <pre><code>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: '&lt;div&gt; {{ greeting }}, {{ name }}&lt;/div&gt;'
          }
     }
  });
  </code></pre>
  
  <p>When I run the above code, my output is only:</p>
  
  <blockquote>
    <p>, Chris</p>
  </blockquote>
  
  <p>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.</p>
  
  <p>I don't see any errors in the javascript console and the template is rendering. </p>
  
  <p>Am I misunderstanding how the props are supposed to be passed in?</p>