title: Vue Prop undefined in child component
body: <p>I am trying to pass an array that inside an object from a parent component to a child component but answers is coming up undefined. When checking the prop in the parent component the data is there, but when it gets past to the child it is undefined.</p>
  
  <pre><code>Vue.component('single-question', {
      props: ['question'],
      data: function () {
          let vm = this
          return {
              answers: vm.question.answers
          }
      },
      template: `&lt;div class="question mb-3"&gt;
                  &lt;div class="card"&gt;
                      &lt;div class="card-body"&gt;
                          &lt;h5 class="class-title"&gt;{{question.questionId}}&lt;/h5&gt;
                          &lt;p class="card-text"&gt;{{question.questionText}}&lt;/p&gt;
                          &lt;a class="btn btn-primary" data-toggle="collapse" v-bind:href="'#answerArea' + question.questionId" role="button" aria-expanded="false" aria-controls="answerArea"&gt;List answers&lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;answer-area v-bind:id="'answerArea' + question.questionId" v-bind:answers="question.answers"&gt;&lt;/answer-area&gt;
              &lt;/div&gt;`   
  })
  
  Vue.component('answer-area', {
      data: function() {
          return {
              show: false
          }
      },
      props: ['answers'],
      template: `&lt;div class="collapse" id=""&gt;
                  &lt;div class="card card-body"&gt;
                      &lt;ol&gt;
                          &lt;li v-for="answer in answers" v-bind:key="answer.answerId"&gt;&lt;/li&gt;
                      &lt;/ol&gt;
                  &lt;/div&gt;
              &lt;/div&gt;`
  
  })
  </code></pre>
  
  <p>edit: Here is where the parent is declared</p>
  
  <pre><code>&lt;div id="question-area"&gt;
              &lt;single-question v-for="question in questions" v-bind:key="question.questionId" v-bind:question="question"
                  v-bind:id="question.questionId"&gt;&lt;/single-question&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>Parent data:</p>
  
  <pre><code>    new Vue ({
          el: '#question-area',
          data: {
              questions: [{
                 "answers": [{
                      "answerId": 21,
                      "questionId": 1,
                      "answerText": "One",
                      "iscorrect": false
                  },
                  {
                      "answerId": 40,
                      "questionId": 1,
                      "answerText": "In",
                      "iscorrect": false
           }],
              "questionId": 1,
              "classCode": "123",
              "questionText": "Result",
          }],
  
          },
      })
  </code></pre>
  
  <p>Query:</p>
  
  <pre><code>$.getJSON(prestring + "/api/v1/classes/"+parsed.classcode+"/questions", function(json) {
              vm.questions = json
              vm.questions.forEach(question =&gt; {
                  $.ajax({
                      url: prestring + "/api/v1/questions/" + question.questionId + "/answers",
                      dataType: 'json',
                      //async: false,
                      success: function (json) {
                          question["answers"] = json
                          // question["answers"].push(json)
                      }
                  })
              })
          })
  </code></pre>