traxxx/assets/components/alerts/remove.vue

<template>
	<Dialog
		title="Remove alert"
		@close="$emit('close', false)"
	>
		<form
			class="dialog-body"
			@submit.prevent="removeAlert"
		>
			Are you sure you want to remove alert?

			<div class="dialog-actions right">
				<button
					type="submit"
					class="button button-primary"
				>Remove</button>
			</div>
		</form>
	</Dialog>
</template>

<script>
async function removeAlert() {
	await this.$store.dispatch('removeAlert', this.alert.id);

	this.$emit('close', true);
}

export default {
	props: {
		alert: {
			type: Object,
			default: null,
		},
	},
	emits: ['close'],
	methods: {
		removeAlert,
	},
};
</script>