<form>标签对vue.js的渲染过程和相对系统有什么影响？

Question

我发现vue.js应用程序中的表单标签破坏了渲染。该应用程序是一个测验，它在设置表单时从本地json文档中提取问题，问题通过vuex存储，并带入具有计算属性的组件中。有趣的是，测验将在呈现错误崩溃前移至第二测验。但是，当我删除表单标签时，测验将继续进行。

显然，删除表单标签并不理想，因为它们对于辅助技术很有用。那么，表单标签或语义html标签通常在vue的重排系统或呈现过程中发挥作用？我已经阅读了指南中的注意事项，似乎并没有解决这种情况。

下面是表单组件和vuex

表单组件

<template>
    <div class="form">
        <h4><b>{{question.question}}</b></h4>
        <div id="form-layout">
            <form >
                <p>
                    <input type="radio" v-model="answer" value="a">
                    <label for="one">{{question.multiple_choice[0].a}}</label>
                </p>
                <p>
                    <input type="radio" v-model="answer" value="b">
                    <label for="two">{{question.multiple_choice[0].b}}</label>
                </p>
                <p>
                    <input type="radio" v-model="answer" value="c">
                    <label for="three">{{question.multiple_choice[0].c}}</label>
                </p>
                <p>
                    <input type="radio" v-model="answer" value="d">
                    <label for="four">{{question.multiple_choice[0].d}}</label>
                </p>
                <button @click="submitQuestion">submit answer</button>
            </form>
        </div>
        <br>
        <button @click="$emit('submitQuiz')">submit quiz</button>
    </div>
</template>
    <script>
    import { mapGetters } from 'vuex';

        export default {
            data() {
                return {
                    questionNumber: 0,
                    answer: ''
                }
            },
            computed: {
                getQuestions() {
                    return this.$store.getters['QuizModule/getQuestionsArray']
                },
                question() {
                    return this.getQuestions[this.questionNumber]
                }
            },
            methods: {
                submitQuestion: function() {
                    // check answer
                    // reset form
                    this.questionNumber += 1
                }
            }
        }
    </script>

vuex

import questionBank from '@/question-bank/practice.json'

const store = new Vuex.Store({
    state: {
      questionsArray: null,
    },
    getters: {
      getQuestionsArray: function (state) {
          return state.questionsArray
      },
      getQuestion: state => {
        const questions = state.questionsArray
        return index => {
          return questions[index]
        }
      }
    },
    mutations: {
      setQuestionsArray (state, questions) {
          state.questionsArray = questions
        }
    },
    actions: {
        async setQuestionsArray ({commit}, questionArray){
            try {
                let questions = []
                for(let i = 0; i < questionArray.length; i++){
                    questions[i] = questionBank[questionArray[i]]
                }
                commit('setQuestionsArray', questions)
            } catch (error) {
                console.log(error)
            }
        }
    }
  })

export default store