Pass data from parent to child component in vue.js : <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>
