[Vuejs]-Vue js putting id to v-model

I would create a function that generates a blank question object, containing an array of generated answer objects.

let answerId = 0;
let questionId = 0;

const createAnswer = () => ({ id: answerId++, answer: '', correct: false })
const createQuestion = () => ({
  id: questionId++,
  question: '',
  answers: [createAnswer()],
})

A component would use those functions to add new questions and answers:

export default {
  data() {
    return {
      questions: [createQuestion()],
    };
  },
  methods: {
    addQuestion() {
      this.questions.push(createQuestion())
    },
    addAnswer(q) {
      /**
       * Since the `answers` object is part of the `questions` object,
       * this takes a question as an argument, and adds a new `answer`
       * object to its `answers` array.
       */
      q.answers.push(createAnswer())
    },
  },
}

In the template, use v-for to render the questions, and use v-on button-click handlers that bind to the component’s addQuestion() and addAnswer():

<template>
  <div>
    <button @click="addQuestion">Add question</button>

    <fieldset class="question" v-for="q in questions" :key="q.id">
      <legend>Question: <input v-model="q.question" type="text" /></legend>

      <button @click="addAnswer(q)">Add answer</button>
      <label class="answer" v-for="answer in q.answers" :key="answer.id">
        Answer: <input type="text" v-model="answer.answer" />
        Correct: <input type="checkbox" v-model="answer.correct" />
      </label>
    </fieldset>
  </div>
</template>

demo