You may have encountered this in Vue 3. You need to update the button in the child component, or rather, calculate the v-if value again after successfully submitting the form so that the button is re-rendered. Somehow transfer the props to the child component again. How can this be done?

Parent component (index.vue):

<template>
 <HeaderComponent/>
 <div class="lg:pb-[16rem]">
 <div class="content container xl:container mx-auto xl:w-[1300px] font-inter">
 <div class="p-3 text-[#17161a] mt-2">
 <CustomGamesBanner
 :userData="publicUserData"
 :onClick="openBecomeStreamerModal"
 />
 </div>
 </div>
 </div>
 <FooterComponent/>
</template>

onMounted(async() => {
 const userId = JSON.parse(localStorage.getItem('user'))?.id;
 if (userId) {
 await getUserPublicData(userId);
 }
 await fetchActiveStreams();
});

Banner to which props are sent:

<template>
 <div class="customgames-space">
 <div class="customgames-info">
 <h1>Custom games</h1>
 <p>Become a streamer on BIGPLAY platform now</p>
 </div>
// this button needs to be updated with new data
 <div v-if="showPendingMessage">
 <CustomButton disabled type="submitted">
 Application sent
 </CustomButton>
 </div>
 <div v-else class="customgames-button">
 <CustomButton @click="handleClick">
 {{ userData?.wow_streamer?.approved_at ? "Create a stream" : "Become a streamer" }}
 </CustomButton>
 </div>
 </div>
</template>

const props = defineProps({
 userData: {
 type: Object,
 required: true,
 },
});

const { addModal } = useModals();
const router = useRouter();

const showPendingMessage = computed(() => {
 const wowStreamer = props.userData?.wow_streamer;
 return wowStreamer && !wowStreamer.approved_at && !wowStreamer.rejected_at;
});

Confirmation modal:

<template>
 <Modal v-model:show="isShowModal" :id="id" :maxWidthModal="true">
 <template #title>
 Become a streamer
 </template>
 <template #body>
 <div class="form-group">
 <label for="channel">Channel link</label>
 <input placeholder="@" v-model="form.channel" type="text" id="channel" class="form-control" />
 <span v-if="errors.channel" class="error-message">{{ errors.channel }}</span>
 </div>
 <div class="form-group">
 <label for="followers">Number of followers</label>
 <input v-model="form.followers_count" type="number" id="followers" class="form-control" min="0" />
 <span v-if="errors.followers_count" class="error-message">{{ errors.followers_count }}</span>
 </div>
 </template>
 <template #footer>
 <button @click="submitForm" class="btn btn-primary">Submit request</button>
 </template>
 </Modal>
</template>

const submitForm = async() => {
 if (!validateForm()) {
 return;
 }
 try {
 const response = await wowStreamersStore.createStreamer(form.value);
 alert(response.data.user)
 isShowModal.value = false;

 addModal('streamerPendingModal');
 // $toast.success('Your application has been sent successfully!', { timeout: 1500 });

 wowStreamersStore.$patch((state) => {
 state.streamer = response.data.user;
 });

 } catch (error) {
 console.log('Error while sending streamer application entry.');
 }
};