VueJS 3 : reference value not updating on click

In VueJS 3, I have a parent Component Index:

     <CreateReportButton>
         <slot>  
            <PrimaryButton as="icon" size="xs" color="white" @click="emitChangeModalTypeChange">
                 <font-awesome-icon icon="fa-regular fa-file-plus" class="h-4 w-4 text-gray-500" />
             </PrimaryButton>                
         </slot>
        </CreateReportButton>

And the CreateReportButton component:

const modalType = ref(null);

...
<template>
    <slot>
        <Dropdown align="right" width="64">
            <template #trigger>
                <PrimaryButton type="button" size="lg">
                    <font-awesome-icon icon="fa-solid fa-plus" class="-ml-0.5 mr-1.5 h-4 w-4" aria-hidden="true" />
                    {{ $t('actions.create') }} {{ $tChoice('report', 1) }}
                </PrimaryButton>
            </template>
            <template #content>
                <DropdownLink as="button" v-on:click="modalType = 'prefilled'">
                    <font-awesome-icon icon="fa-regular fa-file-lines" class="text-gray-400 mr-2" />
                    {{ $t('report.format.prefilled') }}
                </DropdownLink>

                <DropdownLink as="button" v-on:click="modalType = 'blank'">
                    <font-awesome-icon icon="fa-regular fa-file" class="text-gray-400 mr-2" />
                    {{ $t('report.format.blank') }}
                </DropdownLink>

                <DropdownLink as="button" v-on:click="modalType = 'master'">
                    <font-awesome-icon icon="fa-regular fa-file-certificate" class="text-gray-400 mr-2" />
                    {{ $t('report.format.from_master') }}
                </DropdownLink>
            </template>
        </Dropdown>
    </slot>

...

<FormModal
        :show="modalType !== null"
    ...
/>
...

Is it possible that when the user clicks on the PrimaryButton, it changes the modalType value of the child component (CreateReportButton)?

My goal is that in this specific file where I use CreateReportButton, I don't want to use the Dropdown but a simple button (hence the slot, this part is working), and that when the users click on the PrimaryButton, the modalType takes the value 'prefilled', which will then show the FormModal Component.

I've tried to pass a prop reportType from the parent to the child with the value prefilled, and assign this value to modalType in the child, but this is not doing what I want: It's directly open the modal, even before the user clicked on the button. I want it to happen only when the user clicked on the button.

https://vuejs.org/guide/reusability/composables if you use a composable for example

useComposables.ts

export const isClicked = ref(false)

a parent Component Index:

@click="isClicked = true"

child component

watch(
  isClicked,
  () => {
    execYourFunction()
  }, {deep: true}
)

and you export it to your child component file it should work

and you watch the value of isClicked

I invite you to read this documentation

https://vuejs.org/guide/reusability/composables