Вложенные циклические компоненты в Vue.js

Question

Я новичок в фреймворке Vue и пытаюсь вставить цикл for, основанный на компоненте, внутри родительского цикла for.Я прошел 2 дня, тестируя различные способы сделать это, но это все еще не работает.

Приложение, которое я пытаюсь создать, должно дать пользователю возможность создавать тесты.Он может добавить новую форму «вопрос», нажав на кнопку.Каждый блок вопросов содержит по умолчанию входные данные для ответа.Нажав другую кнопку, пользователь может увеличить количество введенных ответов в выбранном блоке вопросов.

Приведенный выше код позволяет вводить вопросы в браузере, функция addQuestion, которая создает новый блок вопросовтоже работает, но ввода ответа, который должен быть под вводом вопроса, нет.Кроме того, консоль браузера не возвращает никаких ошибок.

Может кто-нибудь помочь мне понять, что не так в моем коде, пожалуйста?

Заранее спасибо.

let questionblock = Vue.component('questionblock', {
  delimiters: ['[[', ']]'],
  data: function() {
      return {
          id_count:1,
          answers: [
              {id:1}
          ]        
      }
  },
  props: ['question_prop'],
  methods: {
      addQuestion:  function() {
              ++app.id_question;
              let new_id = app.id_question;
              app.questions.push({id: new_id});
          },
      removeQuestion: function() {
              --app.id_question;
              app.questions.pop();
          }
  },
  template: '<div class="block-question">'                   
              +'<legend>Question [[ question_prop.id ]]</legend>'
              +'<span class="num-question d-inline-block">[[ question_prop.id ]]</span>'
              +'<textarea class="form-control question-control d-inline-block" name="question" placeholder="Entrez votre question"></textarea>'
              +'<i class="fas fa-plus-circle" v-on:click="addQuestion"></i>'
              +'<i class="fas fa-trash" v-on:click="removeQuestion"></i>'
          +'</div>'

});

let answerblock = Vue.component('answerblock', {
  delimiters: ['[[', ']]'],
  props: ['answer_prop'],
  template: '<div class="block-answer">'
              +'<span class="num-answer d-inline-block">[[ answer_prop.id ]]</span>'
              +'<textarea class="form-control answer-control d-inline-block" type="text" name="" placeholder="Entrez votre réponse"></textarea>'
              +'<i class="fas fa-plus-circle"></i>'
              +'<i class="fas fa-trash"></i>'
          +'</div>'
});

var app = new Vue({
  delimiters: ['[[', ']]'],
  components: {questionblock, answerblock},
  el: '#app',
  data: {
      id_question: 1,
      questions: [
          {
              id: 1,
              answers: [{id:0}]
          }
      ],
  },
});

<div id="app" class="col main-content">
    <questionblock
    v-for="question in questions"
    v-bind:question_prop="question"
    v-bind:id_question="id_question"
    v-bind:key="question.id">
        <answerblock 
        v-for="answer in question.answers"
        v-bind:answer_prop="answer"
        v-bind:key="answer.id">
        </answerblock>
    </questionblock>
</div>