Vue componen slot event.

Component-Slot-Event.vue

<script setup>
import { ref } from 'vue';

let selector_slot = ref('accept');
</script>
<template>
<SelectorSlot v-model="selector_slot" name="selector_slot">
  <template v-slot:default="{ onClick }">    
    <SelectorSlotButton v-model="selector_slot" value="accept" @click="onClick('accept')">✔️ Accept</SelectorSlotButton>
    <SelectorSlotButton v-model="selector_slot" value="reject" @click="onClick('reject')">🚩 Reject</SelectorSlotButton>
    <SelectorSlotButton v-model="selector_slot" value="drop" @click="onClick('drop')">❌ Drop</SelectorSlotButton>
  </template>
</SelectorSlot>
</template>

SelectorSlot.vue

<script setup>
const emits = defineEmits(['change']);
const model = defineModel({ required: true });
const props = defineProps({
	name: { type: String, default: 'selector_slot' },
	class: { type: [String, Array, Object] },
});

function onClick(id) {
	model.value = id;
	emits('change', id);
}
</script>
<template>
	<div class="form-input-wrapper">
		<div class="form-selector" :class="props.class">
			<slot name="default" :onClick="onClick"></slot>
		</div>
		<input v-model="model" type="hidden" :name="props.name" @change="emits('change', $event.target.value)" />
	</div>
</template>
<style>
@import url('./css/inputs.css');
</style>

SelectorSlotButton.vue

<script setup>
const model = defineModel({ required: true });
const props = defineProps({
	name: { type: String, default: 'Button' },
	value: { type: String, default: '' },
});
</script>
<template>
	<div class="form-selector-item form-selector-slot-button" :class="{ 'form-selector-item-selected': model == props.value }">
		<slot>{{ props.name }}</slot>
	</div>
</template>
<style>
@import url('./css/inputs.css');
</style>