Vue Prop undefined in child component

Question

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.

Vue.component('single-question', {
    props: ['question'],
    data: function () {
        let vm = this
        return {
            answers: vm.question.answers
        }
    },
    template: `<div class="question mb-3">
                <div class="card">
                    <div class="card-body">
                        <h5 class="class-title">{{question.questionId}}</h5>
                        <p class="card-text">{{question.questionText}}</p>
                        <a class="btn btn-primary" data-toggle="collapse" v-bind:href="'#answerArea' + question.questionId" role="button" aria-expanded="false" aria-controls="answerArea">List answers</a>
                    </div>
                </div>
                <answer-area v-bind:id="'answerArea' + question.questionId" v-bind:answers="question.answers"></answer-area>
            </div>`   
})

Vue.component('answer-area', {
    data: function() {
        return {
            show: false
        }
    },
    props: ['answers'],
    template: `<div class="collapse" id="">
                <div class="card card-body">
                    <ol>
                        <li v-for="answer in answers" v-bind:key="answer.answerId"></li>
                    </ol>
                </div>
            </div>`

})

edit: Here is where the parent is declared

<div id="question-area">
            <single-question v-for="question in questions" v-bind:key="question.questionId" v-bind:question="question"
                v-bind:id="question.questionId"></single-question>
        </div>

Parent data:

    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",
        }],

        },
    })

Query:

$.getJSON(prestring + "/api/v1/classes/"+parsed.classcode+"/questions", function(json) {
            vm.questions = json
            vm.questions.forEach(question => {
                $.ajax({
                    url: prestring + "/api/v1/questions/" + question.questionId + "/answers",
                    dataType: 'json',
                    //async: false,
                    success: function (json) {
                        question["answers"] = json
                        // question["answers"].push(json)
                    }
                })
            })
        })

Answer 1

We would have to check what's in your data to be sure, but you are probably facing one of the Change Detection Caveats.

Try using Vue.set() to create your answers property, as below:

$.getJSON(prestring + "/api/v1/classes/"+parsed.classcode+"/questions", 
function(json) {
        vm.questions = json
        vm.questions.forEach(question => {
            $.ajax({
                url: prestring + "/api/v1/questions/" + question.questionId + "/answers",
                dataType: 'json',
                //async: false,
                success: function (json) {
                    // question["answers"] = json
                    Vue.set(question, 'answers', json); // changed this line
                    // question["answers"].push(json)
                }
            })
        })
    })