How to implement validation in vue js using element-ui?

Question

JavaScript

Good afternoon, I ran into such a problem:
When the button is clicked, the submitForm method is fired in the from.vue file, but the validation does not pass.
Can you please tell me how to accomplish this task?
An example of validation data buried in the rules variable:
rules: {
title: [{min: 3, max: 5, message: "Length should be 3 to 5"}]
}
Using the element.eleme.io/#/en-US/ library component/form
index.html

...
<vue-form>
    <vue-form-input></vue-form-input>
    <vue-form-button></vue-form-button>
</vue-form>
...

app.js

import Vue       from 'vue'
import ElementUI from 'element-ui';
import locale    from 'element-ui/lib/locale/lang/en';
import Form  from './components/formfields';

Vue.use(ElementUI, { locale });
Vue.use(Form);

const app = new Vue({
    el: '#app'
})

file /components/formfields/form.vue

<template>
    <el-form label-width="120px"
        :model="ruleForm" 
        :rules="rules"
        ref="ruleForm"
    >
        <slot></slot>
    </el-form>
</template>


<script>
export default {
    name: 'VueForm',
    props: [
        'formMethod',
        'formAction',
    ],
    data() {
        return {
            ruleForm: {},
            rules: {}
        }
    },
    provide(){
        return {
            fieldsForm: this.ruleForm,
            addFormRules: this.addFormRules,
            submitForm: this.submitForm,
            resetFrom: this.resetFrom,
        }
    },
    methods: {
      
        submitForm(formName) {
            console.log('ruleForm', this.ruleForm);
            console.log('rules', this.rules);

            console.log(this.$refs[formName]);
            this.$refs[formName].validate((valid) => {
            if (valid) {
                alert('submit!');
            } else {
                console.log('error submit!!');
                return false;
            }
            });
        },
        
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },

        addFormRules (ruleForm, rules) {
            this.ruleForm[ruleForm.key] = ruleForm.value;
            this.rules[ruleForm.key] = rules;
        }
    }
}
</script>

file /components/formfields/form-text.vue

<template>
    <el-form-item :label="dataLabel" :prop="dataRow.field">
        <el-input v-model="fieldsForm[dataRow.field]"></el-input>
    </el-form-item>
</template>


<script>
export default {
    name: 'VueFormText',
    data () {
        return {
            input: ''
        }
    },
    inject: [ 'fieldsForm', 'addFormRules' ],
    props: [
        'dataRow',
        'dataLabel',
        'dataValue'
    ],
    created () { 
        let rules = [];
        if(this.dataRow.details && this.dataRow.details.validation) {
            rules = this.dataRow.details.validation
        }
        
        this.addFormRules(
            { 'key': this.dataRow.field, 'value': this.dataValue },
            rules
        );
    },
}
</script>

Answer 1

Using the scientific poke method, found an error in the file /components/formfields/form.vue
Current method

addFormRules (ruleForm, rules) {
        this.ruleForm[ruleForm.key] = ruleForm.value;
        this.rules[ruleForm.key] = rules;
}

addFormRules (ruleForm, rules) {
        // this.ruleForm[ruleForm.key] = ruleForm.value; УДАЛИЛ эту сточку и все заработало
        this.rules[ruleForm.key] = rules;
}

I do not understand what this is connected with, maybe someone can tell?