Provide and injecting 2 values, 1 is an async function?

Good day, I’m using provide / inject to send a button click event call from Component3 to Component1. Everything works well as I can see the console message in Component1 async function tryMethod() when I press the button named Click ME in Component3. I was wondering how do I go about taking that Component2 template @tryFunction event to also send the async function updateFunction(birthdayYear) to reach Component1?
I tried to add an inject(‘tryFunction’) inside the updateFunction(birthdayYear) and it didn’t work. Any tips much appreciated, thank you!

Component1.vue

<script setup>
import { inject, provide } from 'vue'

provide('tryFunction', tryFunction)
async function tryFunction() {
    console.log('Component1 tryFunction() called!')
}
</script>

<template>
    <div>Component1 Page</div>
</template>

Component2.vue

<script setup>
import { inject } from 'vue'
import Component3 from '@/files/Component3.vue' 

const axios = inject('axios')
const tryFunction = inject('tryFunction')

async function updateFunction(birthdayYear) {
    await axios.post(player.data('playerData'), { playerYear: birthdayYear })
}
</script>

<template>
    <div>
		Component2 Page
		<Component3
			@tryFunction="tryFunction"
		/>
	</div>
</template>

Component3.vue

<script setup>
function tryFunctionClicked() {
    emit('tryFunction')
}
</script>

<template>
    <div>
		Component3 Page
		<button @click="tryFunctionClicked">Click here</button>
	</div>
</template>
1 Like

So I was able to figure out another way to take that data set by the Component2 async function updateFunction(birthYear) and have it called in Component1. This works well. Now my question is how do I attach the parameter birthdayYear to the inject call to have it available at Component1?