如何在Vue.js中使v-model动态化

Question

我使用VueJs：2.3.3动态构建表单，Vee-Validate：2.0.0-beta.17根据此tutorial验证输入字段：

<form @submit.prevent="validateBeforeSubmit">
  <div v-for="f in form.fields" class="form-group" :class="{'has-error': errors.has(f.model) }" >
    <label class="control-label">{{ f.label }}</label>
    <input v-model="f.model" v-validate.initial="f.model" :data-vv-rules="f.rules" class="form-control" type="email" :placeholder="f.placeholder">
    <p class="text-danger" v-if="errors.has(f.model)">{{ errors.first(f.model) }}</p>
    <button type="submit" class="btn btn-default">Submit</button>
  </div>
</form>

我的vue实例有：

data(){
    return {
      form: {
        fields: [{
          model: 'email',
          rules: 'required|email',
          label: 'Email',
          placeholder: 'Email'
        }]
      }  
    }
}

问题在于，我无法通过vee-validation使我的表单正常工作：当我直接向以下数据添加电子邮件时：email: ''（外部表单）并更改v-validate的值并且data-rules到'email'它按预期工作，但是当我将动态值添加到这些属性时，它不起作用。任何人都可以帮我解决这个问题吗？

非常感谢。