veevalidate作用域验证不起作用

我正在构建一个Web应用程序,它在同一页上有多个表单,所以 scoped validation from VeeValidate 看起来是个明显的选择,但我做不到。

不管我做什么, 模型始终有效 . 我做了一个小例子来帮助你帮助我。 https://jsfiddle.net/pvkovalev/3vwp9zdo/

这是我的HTML代码:

<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>

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))
      })
    }
  }
})

我错过了什么?也许,一些显而易见的事情。感谢您的帮助!