Refs can be passed down just like any prop. You don’t necessarily need provide/inject.

App.vue

<v-btn class="indent" color="indigo" ref="trigger1"
  >Ref Activator 1
</v-btn>
<RADialog1 :verbiage="ra_prop1" :activator="trigger1" />

const trigger1 = ref()

Side note: When defining a ref, the value wrapped by the ref is considered the initial value. You originally had ref('raDialog1'), which is a ref with initial string value “raDialog1”, but once the component mounts, this initial value is overwritten with the VBtn component. It’d be better to just let the initial value be null, e.g. ref()

RADialog1

<v-dialog max-width="360" persistent :activator="activator">

const props = defineProps(['verbiage', 'activator'])

You mentioned typescript error before. If you want typescript to be happy, you can define props like this

<script setup lang="ts">
  import type { PropType, ComponentPublicInstance } from 'vue'

  const props = defineProps({
    verbiage: { type: String },
    activator: {
      type: Object as PropType<ComponentPublicInstance>
    }
  })
</script>

Playground example

Simpler Alternative

There’s actually a shortcut here since the root element of RADialog is v-dialog, assigning the activator to RADialog will have it fallthrough to the v-dialog (provided you don’t declare the activator as a prop in RADialog).

App.js

<RADialog1 :verbiage="ra_prop1" :activator="trigger1" />

Now just don’t declare any activator prop in RADialog1.

RADialog1.vue

<v-dialog max-width="360" persistent>

const props = defineProps(['verbiage'])

Playground example

There are three issues in your code:

• When providing a ref, use the ref itself, not its value:

  const trigger1 = ref('raDialog1')
  provide('refActivtor1', trigger1) // <--- instead of trigger1.value

Using trigger1.value would provide the data inside the ref at the moment provide() is called. This happens during setup, when the component is not yet mounted, so the ref will be undefined.

• Typo: you provide 'refActivtor1' (missing ‘a’ in ‘vtor1’), but try to resolve it as 'refActivator1' in RADialog1:

const refActivator1 = inject('refActivator1')

Note there is a warning in the console about a missing inject.

• The activator prop of VDialog is given as regular string attribute (activator="raDialog1" resolves to the string 'raDialog1'), but it should be a Vue data binding with either v-bind:activator or the shorthand :activator:

<v-dialog 
  :activator="refActivator1"

Now the content of the ‘refActivator1’ variable is bound to the prop.

Here is the updated playground