SelectMenu trailing Button NuxtUI

<script setup lang="ts">
import { useField } from "vee-validate";
import { IsSelectVariant } from "~/types/variants";
import type { CodebookDto } from "~~/apis/client-is/models";

const props = withDefaults(
  defineProps<{
    label: string;
    name: string;
    options: Array<any> | Array<CodebookDto> | undefined;
    optionAttribute?: string;
    valueAttribute?: string;
    variant?: IsSelectVariant;
  }>(),
  {
    variant: IsSelectVariant.default,
    optionAttribute: "value",
    valueAttribute: "id",
  }
);

const emit = defineEmits(["update:modelValue"]);

const { value: modelValueProxy, errorMessage } = useField<string>(props.name);

const fieldProps = computed(() => ({
  error: errorMessage.value,
}));
</script>

<template>
  <UFormGroup
    :label="props.label"
    :name="props.name"
    v-bind="fieldProps"
    :hint="props.variant == IsSelectVariant.optional ? '(nepovinný údaj)' : ''"
  >
    <USelectMenu
      v-model="modelValueProxy"
      :options="props.options"
      :optionAttribute="props.optionAttribute"
      :valueAttribute="props.valueAttribute"
    >
      <template #empty>Zoznam je prázdny </template>
      <template #trailing>
        <UButton
          v-show="modelValueProxy != null"
          color="gray"
          variant="link"
          icon="i-heroicons-x-mark-20-solid"
          :padded="false"
          @click="console.log('clear')"
        />
      </template>
    </USelectMenu>
  </UFormGroup>
</template>

<script setup lang="ts">
import { useField } from "vee-validate";
import { IsSelectVariant } from "~/types/variants";
import type { CodebookDto } from "~~/apis/client-is/models";

const props = withDefaults(
  defineProps<{
    label: string;
    name: string;
    options: Array<any> | Array<CodebookDto> | undefined;
    optionAttribute?: string;
    valueAttribute?: string;
    variant?: IsSelectVariant;
  }>(),
  {
    variant: IsSelectVariant.default,
    optionAttribute: "value",
    valueAttribute: "id",
  }
);

const emit = defineEmits(["update:modelValue"]);

const { value: modelValueProxy, errorMessage } = useField<string>(props.name);

const fieldProps = computed(() => ({
  error: errorMessage.value,
}));
</script>

<template>
  <UFormGroup
    :label="props.label"
    :name="props.name"
    v-bind="fieldProps"
    :hint="props.variant == IsSelectVariant.optional ? '(nepovinný údaj)' : ''"
  >
    <USelectMenu
      v-model="modelValueProxy"
      :options="props.options"
      :optionAttribute="props.optionAttribute"
      :valueAttribute="props.valueAttribute"
    >
      <template #empty>Zoznam je prázdny </template>
      <template #trailing>
        <UButton
          v-show="modelValueProxy != null"
          color="gray"
          variant="link"
          icon="i-heroicons-x-mark-20-solid"
          :padded="false"
          @click="console.log('clear')"
        />
      </template>
    </USelectMenu>
  </UFormGroup>
</template>