Sending nested data from Blade to Vue

I have 3 models in a laravel application: 1) Lesson 2) Quiz 3) Answer (I should have named it Option actually). Their relationship is set up in this manner: Each Lesson has Quizzes, each Quiz has Answers. In a blade file I have access to a $lesson instance. I want to send both $lesson->quizzes and $quiz->answers from Blade to a VueJS method. Now I can only send the quizzes:

    <modal-button color="success" size="small" icon="eye" header="View Quiz" btntxt="View Quiz" @showmodal="onShowViewQuizModal({{ $lesson->quizzes }})">
    @include('partials.quizform')
    </modal-button>

I capture the sent quizzes in my vuejs method and assign the array of objects to a vuejs data property:

    onShowViewQuizModal(quizzes){
        this.quizzes = quizzes;
    }

Within the quizform partial, I am trying to display these nested sets of data. I have something like this in my mind:

    <div v-for="quiz in quizzes">
        <p>@{{ quiz.title }}</p>
        
        <div v-for="answer in quiz.answers">
            <p>@{{ answer.title }}</p>
        </div>
    </div>

Only the outer v-for will work, but the inner v-for won't because quiz.answers is probably undefined.

I hope you get the idea and I'm sure people must've come across this situation at some point. How can I handle the situation?