separate validation rules out to provider()

rules_provider.html

<template>
    <vee-form class="login-form">
        <vee-form-item>
            <vee-input name="email" title="Email" size="large"
                       v-model="email" v-validate />
        </vee-form-item>
        <vee-form-item>
            <vee-input name="password" title="Password" type="password" size="large" 
                       v-model="password" v-validate />
        </vee-form-item>
        <vee-form-item>
            <el-button size="large" type="primary" @click="validateForm()">Log-in</el-button>
        </vee-form-item>
    </vee-form>
</template>

<script>
import Debug from 'debug';

const debug = Debug('Login comp:');

export default {
    $validates: true,
    provide: {
        rules: {
            email: 'required|email',
            password: 'required',
        },
    },
    data() {
        return {
            email: '',
            password: '',
        };
    },
    methods: {
        validateForm() {
            this.$validator.validateAll().then(() => {
                debug('No errors in Login form. Submitting to server...');
            }).catch(() => {
                debug(`Error while validating the login form:\n${JSON.stringify(this.errors)}`);
            });
        },
    },
};
</script>