Problem with vuelidate with child component

Hi there,

I'm pretty new in vue, I am using mdb-bootstrap-vue framework and that framework has already some inbuilt components so I can use right away as <mdb-input />

So I've created some forms with mdb-bootstrap using mdb-input, and all was working fine. But since I wanted to redesign the layout a little I didnt want to go to each vue and insert always the same .css scoped. So what I thought was to create a new component <custom-mdb-input /> with this content:

<template>
    <div>
        <mdb-input v-bind="$attrs" />
    </div>
</template>

<script>
import { mdbInput } from 'mdbvue';

export default {
  name: "CustomMdbInput",
  components: {
    mdbInput,
  },
}
</script>

<style scoped>
</style>

The only thing it does is to call mdb-input and binding all props and attributes. (Or so I beleive lol)

And it does load correctly, the only problem that I can't understand and bypass is that I'm using vuelidate for form validations. So one of my form codes is this:

<template>
    <form novalidate @submit.prevent>
        <custom-mdb-input
            v-model="form.name"
            :label="trans('_v4.general.app.label.name')"
            :customValidation="form.name.length!=0||submitting"
            :isValid="!$v.form.name.$invalid"
            fal icon="user"
            type="text"
            autocomplete="name"
        >
            <span class="help-block help-danger" v-if="form.errors.has('name')">
                <strong>{{form.errors.get('name')}}</strong>
            </span>
            <span class="help-block help-danger" v-if="submitting && !$v.form.name.required">
                <strong>{{ trans('_v4.general.app.form.errors.required', {'type': trans('_v4.general.app.label.name') }) }}</strong>
            </span>
            <span class="help-block help-danger" v-if="submitting && !$v.form.name.minLength">
                <strong>{{ trans('_v4.general.app.form.errors.minlength', {'type': trans('_v4.general.app.label.name'), 'min': $v.form.name.$params.minLength.min }) }}</strong>
            </span>
        </custom-mdb-input>

        <div class="text-center mt-2">
            <button class="btn btn-default" @click.prevent="submit" :disabled="loading">
                <span v-if="!loading">{{ trans('_v4.auth.register.title') }}</span>
                <span v-else>{{ trans('_v4.general.navigation.loading') }}</span>
            </button>
        </div>
    </form>
</template>

<script>
import axios from 'axios';
import { mdbBtn } from 'mdbvue';
import { required, sameAs, email, minLength } from 'vuelidate/lib/validators';
import Form from '../../../utilities/Form';

export default {
  name: 'SettingsRegistration',
  props: ['data'],
  components: {
    mdbBtn
  },
  data() {
    return {
      form: new Form({
        name: '',
      }),
      submitting: false,
      loading: false,
      path: {
        users: '/admin/settings/users'
      }
    };
  },
  methods: {
    submit(e) {
      this.submitting = true;

      this.$v.$touch();

      if (this.$v.$invalid) {
        return;
      }

      this.loading = true;

      e.target.disabled = true;

      this.form
        .post(`${path.users}/${this.form.plan_id}`)
        .then(result => {
          location.href = result;
        })
        .catch(error => {
          this.message = error;
          this.loading = false;
          e.target.disabled = false;
        });
    }
  },
  validations() {
    return {
      form: {
        name: {
          required,
          minLength: minLength(6)
        },
      }
    };
  }
};
</script>

<style scoped>

</style>

And the validations of name, email and password are not working when using the custom-mdb-input calling the mdb-input. If I put the mdb-input instead of custom-mdb it works perfectly. But since I want to costumize the style of all the mdb-inputs, I thought about this solution of creating a custom one that will have a style scoped that will "paint" my style and call it.

So, any idea about how making this validation work?

Thanks!