Unable to implement vuelidate with renderless component

I want to create a renderless form with vuejs - I’m using vuelidate for form validation. The form uses scoped slot to manage the model and controls.

Unfortunately i’m not able to implement the vuelidate for the form validation by renderless approach. Any ideas would be highly appreciated. Below is what i have tried.

App.vue

<renderless-form>
  <form @submit.prevent="submit" slot-scope="{ ele, submit }">
     <input type="email" v-model="ele.model.name" />
     <button> Submit </button>
  </form>
</renderless-form>

<script>
import renderlessFrom from "./components/renderless-form.vue";

export default {
  name: "App",
  components: {
    "renderless-form": renderlessFrom
  }
};
</script>

Renderless-form.vue

import { required, minLength, between } from "vuelidate/lib/validators";
export default {
    data() {
      return {
        model: {
          name: ''
        }
      };
    },
    validation: model, //i am sceptical here how to put validation
    methods: {
      async submit() {
        console.log(this.model) 
      },
    },
    render() {
      return this.$scopedSlots.default({
        // Data
        ele: this.model,
        
        // Methods
        submit: this.submit,
      });
    },
  };   

[dobromir-hristov]

Pass them as a prop or just dynamic for this form?

You can still return an object from inside the validations function, making your rules dynamic.

[power-cut]

@dobromir-hristov what if i want to implement validations as dynamic ?