Vue.js：即使在firefox中提交之前，必填字段也会突出显示

Question

在macOS Sierra版本10.12.6和Firefox版本56.0.2（64位）中，所有字段在提交之前都会突出显示，任何帮助解决此问题都将是非常有用的。

这可行，因为数据radioInputVal为string：

var vm = new Vue({
  el: '#app',
  data: {
    radioInputVal: ''
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script>

<div id="app">
  <form>
    <label for="input1">1:</label>
    <input type="radio" name="test" id="input1" required value="1" v-modal="radioInputVal" />
    <br />
    <label for="input2">2:</label>
    <input type="radio" name="test" id="input2" value="2" v-modal="radioInputVal" />
    <br />
    <label for="input3">3:</label>
    <input type="radio" name="test" id="input3" value="3" v-modal="radioInputVal" />
    <br />
    <input type="submit" value="send" />
  </form>
  
</div>

这不能正常工作，因为它的数据radioInputObj是一个对象。

var vm = new Vue({
  el: '#app',
  data: {
    radioInputObj: {
      val: ''
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script>

<div id="app">
  <form>
    <label for="input1">1:</label>
    <input type="radio" name="test" id="input1" required value="1" v-model="radioInputObj.someVal" />
    <br />
    <label for="input2">2:</label>
    <input type="radio" name="test" id="input2" value="2" v-model="radioInputObj.someVal" />
    <br />
    <label for="input3">3:</label>
    <input type="radio" name="test" id="input3" value="3" v-model="radioInputObj.someVal" />
    <br />
    <input type="submit" value="send" />
  </form>  
</div>

以下代码未链接到VUE.js，并且在提交之前不会突出显示必填字段。

<form>
  <label for="input1">1:</label>
  <input type="radio" name="test" id="input1" required value="1" />
  <br />
  <label for="input2">2:</label>
  <input type="radio" name="test" id="input2" value="2" />
  <br />
  <label for="input3">3:</label>
  <input type="radio" name="test" id="input3" value="3" />
  <br />
  <input type="submit" value="send" />
</form>