title: Using parent component data in child component Vue Js
body: <p>I am using Laravel Spark, and have a component within a component.</p>
  
  <pre><code>&lt;parent-component :user="user"&gt;
  
     &lt;child-component :user="user" :questions="questions"&gt;&lt;/child-component&gt;
  
  &lt;parent-component&gt;
  </code></pre>
  
  <p>In my parent component I have questions data in my data method:</p>
  
  <pre><code>props: ['user'],
  data(){
      return {
          questions: {
              // these are set in another method in this file
          },
      }
  },
  </code></pre>
  
  <p>As you can see, I have added :questions to my child component in the hope of being able to use the questions in that component as I need to loop through them.</p>
  
  <p>In my js file for the child component I have:</p>
  
  <pre><code>props: ['user', 'questions'],
  </code></pre>
  
  <p>But when trying to use the questions I get a default object unlike the user which contains all the information.</p>
  
  <p>How should this be done correctly as im just guessing currently...</p>
  
  <p>Here is the js file for the child component:</p>
  
  <pre><code>Vue.component('control-question-navigation', {
      props: ['user', 'questions'],
      data() {
          return {
          //
          }
      },
      methods: {
      },
      mounted() {
          var $this = this;
          console.log($this.questions); // return standard object
          console.log($this.user); // returns the user data correctly
      }
  });
  </code></pre>