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

我发现vue.js应用程序中的表单标签正在破坏渲染 . 该应用程序是一个测验，在设置表单时从本地json文档中提取问题，问题与vuex一起存储并被带入具有计算属性的组件 . 有趣的是，测验会在出现渲染错误之前进入第二个测验 . 但是，当我删除表单标签时，测验将继续完成 .

显然不理想删除表单标签，因为它们对辅助技术很有用 . 那么什么roll会形成标签或语义html标签一般与vue的重现系统或渲染过程一起玩？我已经阅读了指南中的警告，但似乎并未解决这种情况 .

下面是表单组件和vuex

form component

<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