vee-validate, формы всегда становятся недействительными при использовании раскрывающегося списка кендо на дочернем компоненте с массивом props

Question

При отправке формы формы всегда становятся недействительными, хотя значение всегда выбиралось на dropdown составная часть.

Элемент управления Kendo Dropdown находится на отдельном дочернем компоненте, а формы - в родительском компоненте.

Вы можете проверить код ниже, здесь значение на size уже выбран, но при отправке форм выдает требуемую ошибку.

Когда значение будет выбрано, ошибка исчезнет, ​​но при отправке формы форма снова станет недействительной.

const config = {
  aria: false,
  classNames: {},
  classes: false,
  delay: 0,
  errorBagName: "errors",
  events: "input|blur",
  fieldsBagName: "fieldsName",
  i18n: null,
  i18nRootKey: "validations",
  inject: true,
  locale: "en",
  strict: true,
  validity: false
};
Vue.use(VeeValidate, config);


Vue.component('row-component', {
  inject: ['$validator'],
  data: function() {
    return {
      // val: this.model
      items: [
        'name',
        'size'
      ]

    }
  },
  props: {
    model: {
      type: Array,
      default: []
    },
    scopes: {
      type: String,
      default: ""
    },
    dataSource: {
      type: Array,
      default: []
    }
  },
  template: '#form-template',
})

new Vue({
  el: '#app',
  methods: {
    onSubmit(scope) {
      this.$validator.validateAll(scope).then((result) => {
        if (result) {
          // eslint-disable-next-line
          alert('Form Submitted!');
          return;
        }
      });
    }
  },
  data: function() {
    return {

      form_fields: {
        type: null,
        contact: [{
            name: 'John',
            size: '1'
          },
          {
            name: 'Marry',
            size: '2'
          },
          {
            name: 'Smith',
            size: '1'
          }
        ]
      },
      dataSourceArray: [{
          text: 'Small',
          value: '1'
        },
        {
          text: 'Medium',
          value: '2'
        },
        {
          text: 'Large',
          value: '3'
        },
        {
          text: 'X-Large',
          value: '4'
        },
        {
          text: '2X-Large',
          value: '5'
        }
      ]
    }
  }
})

span.is-danger {
  color: #9F3A38;
}

<!--Load Kendo styles from the Kendo CDN service-->
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.common.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.default.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css" />
<!--Load the required libraries - jQuery, Kendo, Babel and Vue-->
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.3.913/js/kendo.all.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser-polyfill.min.js"></script>
<script src="https://unpkg.com/vue"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<script src="https://unpkg.com/vee-validate@2.1.0-beta.7"></script>
<script src="https://unpkg.com/@progress/kendo-dateinputs-vue-wrapper/dist/cdn/kendo-dateinputs-vue-wrapper.min.js"></script>
<script src="https://unpkg.com/@progress/kendo-dropdowns-vue-wrapper/dist/cdn/kendo-dropdowns-vue-wrapper.js"></script>
<div id="app">
   <form @submit.prevent="onSubmit('form-client')" data-vv-scope="form-client" autocomplete="off">
      {{form_fields.contact}}
      <row-component :model.sync="form_fields.contact" :data-source="dataSourceArray" :scopes="'form-client'"></row-component>
      <button type="submit" class="btn btn-primary">Submit</button>
   </form>
</div>
<template id="form-template">
   <div>
      <b-table striped hover :items='model' :fields='items'>
         <template slot="name" slot-scope="data">
            <b-form-input type="text" :name="`name_${data.index}`" 
               v-validate="'required'" 
               data-vv-as="Name"
               placeholder="Name" v-model="data.item.name">
            </b-form-input>
            <span class="is-danger" v-if="`errors.has(${scopes}.name_${data.index})`">{{errors.first(`${scopes}.name_${data.index}`)}}</span>
         </template>
         <template slot="size" slot-scope="data">
            <kendo-dropdownlist 
               v-model="data.item.size"
               :data-vv-name="`size_${data.index}`" 
               :data-source="dataSource"
               v-validate="'required'"
               :data-text-field="'text'"
               :data-value-field="'value'"
               :option-label='"--SELECT--"'
               data-vv-as="Size"
               :auto-bind="true"
               :index="0"
               :filter="'contains'">
            </kendo-dropdownlist>
            <span class="is-danger" v-if="`errors.has(${scopes}.size_${data.index})`">{{errors.first(`${scopes}.size_${data.index}`)}}</span>
         </template>
      </b-table>
   </div>
</template>

Используемая мной версия vee-validate: "^2.1.0-beta.7", но когда я продолжаю понижать версию до версии "^2.1.0-beta.2, все равно остается та же проблема, и ниже beta.2 с этим есть и другие проблемы.

Так как, это, кажется, ошибка с vee-validate, Пожалуйста, предложите некоторый обходной путь для сценария в этом случае.