Renderless Components

app.vue

<template>
  <v-input 
    v-slot="{ error }"
    :min="5"
    :max="10"
    :value="username"
    :validation-algorthm
  >
    <input v-model="username" />
    <div v-if="error" class="error">
      {{ error }}
    </div>
  </v-input>
</template>

<script>
import { ref } from 'vue'
import VInput from './v-input.vue'

export default {
  components: { VInput },
  setup() {
    return {
      username: ref('')
    }
  }
}
</script>

<style>
.error { color: red; }
</style>

v-input.vue

<script>
function getError(value, { min, max }) {
  if (!value) {
    return 'Required'
  }

  if (value.length < min) {
    return `Min is ${min}`
  }

  if (value.length > max) {
    return `Max is ${max}`
  }
}

import { computed } from 'vue'

export default {
  props: ['min', 'max', 'value'],
  setup(props, ctx) {
    const error = computed(() => getError(
      props.value,
      { min: props.min, max: props.max }
    ))

    return () => ctx.slots.default({
      error: error.value
    })
  }
}
</script>