Emit changes to another component

Hi, can anyone help me emit changes from my main component to my second component? I have a Booking System as my main component and I want to display a flash message when a booking has been made.

I'm just not so familiar with emitting things.

Here is my Flash component, it has functions that will hide the component after 3s. But I can't figure out how I can toggle show = true in my BookingSystem component? Any ideas?

<template>
	<div class="fixed bottom-0 right-0 shadow-lg w-1/4 h-auto p-4 my-16 mx-8 rounded-lg bg-white" role="alert" v-show="show">
		<div class="flex items-center">
			<div class="w-6">
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="fill-current text-green-500">
					<path d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"/>
				</svg>
			</div>
			<div class="flex-1 px-2">
				<p class="text-lg font-bold border-green-500 text-green-500">Success</p>
				<p class="text-sm leading-relaxed">Your booking has been made</p>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'Flash',

	data () {
		return {
			show: false,
		}
	},

	created() {
		setTimeout(() => {
			this.show = false;
		}, 3000);
	}
};
</script>