title: Pass data from parent to child component in vue.js
body: <p>I am trying to pass data from a parent to a child component. However, the data I am trying to pass keeps printing out as blank in the child component. My code:</p>
  
  <p>In <code>Profile.js</code> (Parent component)</p>
  
  <pre><code>&lt;template&gt;
  
      &lt;div class="container"&gt;
          &lt;profile-form :user ="user"&gt;&lt;/profile-form&gt;
      &lt;/div&gt;
  
  &lt;/template&gt;
  
  &lt;script&gt;
  
  import ProfileForm from './ProfileForm'
  
  module.exports = {
  
      data: function () {
          return {
              user: ''
          }
      },
  
     methods: {
  
      getCurrentUser: function () {
          var self = this
          auth.getCurrentUser(function(person) {
              self.user = person
          })
      },
  
  }
  
  &lt;/script&gt;
  </code></pre>
  
  <p>In <code>ProfileForm.js</code> (Child component)</p>
  
  <pre><code>&lt;template&gt;
  
  &lt;div class="container"&gt;
      &lt;h1&gt;Profile Form Component&lt;/h1&gt;
  &lt;/div&gt;  
  
  &lt;/template&gt;
  
  
  &lt;script&gt;
  
  
  module.exports = {
  
  
    created: function () {
      console.log('user data from parent component:')
      console.log(this.user) //prints out an empty string
    },
  
  
  }
  
  &lt;/script&gt;
  </code></pre>
  
  <p>Note - my <code>user</code> is loaded via my <code>getCurrentUser()</code> method... Can someone help?</p>
  
  <p>Thanks in advance!</p>