VeeValidate scoped validation doesn't work - vuejs2

Question

I'm building a web application which has several forms on the same page, so scoped validation from VeeValidate looked like an obvious choice, but I can't make it work.
No matter what I do, model is always valid. I built a small example to help you help me 😊 https://jsfiddle.net/pvkovalev/3vwp9zdo/
Here is my HTML code:
<div id="app">
<div data-vv-scope="InformationStep1">
<input v-model="input1" v-validate="{required: true}" />
</div>
<div data-vv-scope="InformationStep2">
<input v-model="input2" v-validate="{required: false}" />
</div>
<input type="button" #click="validate" value="validate" />
</div>
And JS:
Vue.use(VeeValidate)
new Vue({
el: "#app",
data: {
input1: undefined,
input2: 'not required'
},
methods: {
validate: function (){
this.$validator.validateAll('InformationStep1').then((result) => {
alert('InformationStep1 valid: '+ JSON.stringify(result))
})
this.$validator.validateAll('InformationStep2').then((result) => {
alert('InformationStep2 valid: '+ JSON.stringify(result))
})
}
}
})
What did I miss here? Perhaps, something obvious. Any help appreciated!

Answer 1

I found it!
Okay, so the solution is to use form tag, not a div tag. As soon as I changed it, it works like a charm.
Here is a new code:
<div id="app">
<form data-vv-scope="InformationStep1">
<input v-model="input1" v-validate="{required: false}" />
</form>
<form data-vv-scope="InformationStep2">
<input v-model="input2" v-validate="{required: true}" />
</form>
<input type="button" #click="validate" value="validate" />
</div>
and new fiddle https://jsfiddle.net/pvkovalev/1L5t3dsc/