I have a TranslatableInput component that has a complex logic for rendering different types of input fields. I would like to create a Wrapper component that @Provide some methods/properties which I could @Inject into a sub component of the TranslatableInput down the tree, and perform different operations or call those specific injected methods with values from the lower level child.

~/MyForm.vue

<Wrapper-ipnut v-model="model.audio" :model="model.audio">
   <template v-slot:input-slot>
      <translatable-input v-model="model.phrase" :model="model.phrase" />
   </template>
</Wrapper-input>

~/WrapperInput.vue

<template>
  <div>
    <h2>Wrapper input</h2>
    <slot name="input-slot" :callService="callService" />
  </div>
</template>

<script lang="ts">
  export default class WrapperInput extends Vue {
    @Provide("audio-service")
    private callService = this.callTTS

    callTTS(value: any) {
      console.log("TTS called: ", value)
    }
  }
</script>

and now I am trying to use the callService method into the sub component but it s missing the Injection.

However if I do it in the parent, MyForm.vue, it is working, but I would like to pass it from the WrapperInput component to have more control over each InputField and ideally be able to configure it for each one