van-form无法校验表单必输项

当点击保存按钮时触发submit事件,发现校验不生效,反而报subRef is not function的问题
经过排查代码逻辑发现没有问题,就是没有触发form表单的校验事件

<div v-for="(item,index) in tagsList" :key="index">
	<van-form ref="subRef">
		<van-field label="姓名" v-model="item.names" name="姓名" :rules="[{ required: true, message: '请填写用户名' }]"/>
	</van-form>
</div>
<van-button @click="submit">保存</van-button>
submit(){
	this.$refs.subRef.validate().then(()=>{
		console.log('校验')
	})
}

当把代码改成如下:
<van-form ref="subRef">
	<div v-for="(item,index) in tagsList" :key="index">
		<van-field label="姓名" v-model="item.names" name="姓名" :rules="[{ required: true, message: '请填写用户名' }]"/>
	</div>
</van-form>
<van-button @click="submit">保存</van-button>

改成如上代码之后,form表单的校验事件触发了,原来form对整个表单进行校验时,需要把van-form放至最外层包裹其它代码,相当于作为父级,这样代码解析时,是从上至下的,先解析最外层的,再解析里面的