Validating a form in a child, the content of it passed as default slot, but the rules are not found

[taliesin]

I'm pretty new to Vue and Vuetify (and to be honest not much of a JavaScript programmer in the first place), so this might be pretty obvious for anyone, but me :-)

The title may be a bit confusig as-well so here goes the code:
The parent component:

<template>
    <SaveAndReload :model="form1">
      <v-text-field label="label1" v-model="form1" :rules="isRequired"></v-text-field>
    </SaveAndReload>
</template>

<script>
export default {
  data: () => ({
    form1: ''
  }),
  isRequired: [(v) => !!v || '.. is required']
}
</script>

The SaveAndReload child component (reduced to the max):

<template>
    <v-form ref="sar_form" lazy-evaluation>
      <slot />
    </v-form>
    <v-btn @click="save">Save</v-btn>
</template>

<script>
export default {
  data: () => ({
  }),
  methods: {
    async save() {
      console.log('Saving...')
      console.log('Form data:', JSON.stringify(this.model))

      const the_form = this.$refs.sar_form
      const validation = await the_form.validate()
      console.log('Validation:', validation)
    }
  }
}
</script>

I've debugged the validation and it progresses through the form items, however the rules defined in the parent component are simply not found in the child context. If this is the intended behaviour, what should I do to allow the parent component to define its form fields and the validation rules and still allow the child to validate the encapsulating form.

Note: The example was reduced to only show the effect, in the real application SaveAndReload provides quite a bit more (card, icons, snackbars ... and the code to ajax model data to and from the backend).
Its purpose is mainly to have the same behaviour for different settings in an embedded context (WiFi station and AP settings, NTP settings, measurement settings and more).

[taliesin]

Ok, I got at least a workaround:

In the parent component I pass the rules explicitly, and adjust the call accordingly:

<template>
  <SaveAndReload :model="form1" :rules="rules">
    <v-text-field label="label1" v-model="form1" :rules="rules.isRequired"></v-text-field>
  </SaveAndReload>
</template>

<script>
export default {
  data: () => ({
    form1: ''
  }),
  rules: {
    isRequired: [(v) => !!v || '.. is required']
  }
}
</script>

Computed rules must be initialized in the created() hook, like so:

  created() {
    // late fix to inject rules for SaveAndReload
    this.rules['passwordRules'] = this.passwordRules
    this.rules['isValidIPRules'] = this.isValidIPRules
  }

In the child component everything stays the same, except the rules must be included in defineProps().