How to remove the mask from a componentized input with defineModel?

[marco-trds]

In this case, even updating the modelValue with the unmasked value, it remains masked.

<script setup lang="ts">
import type { MaskaDetail, MaskType } from 'maska'
import { vMaska } from 'maska/vue'
import { type HTMLAttributes } from 'vue'

import { cn } from '@/shared/utils/cn'

const props = defineProps<{
  mask?: MaskType
  class?: HTMLAttributes['class']
}>()

const modelValue = defineModel<string | number>()

function onMaska(e: CustomEvent) {
  const detail = e.detail as MaskaDetail
  modelValue.value = detail.unmasked
}
</script>

<template>
  <input
    v-model="modelValue"
    v-maska="{
      mask: props.mask,
    }"
   @maska="onMaska($event)"
   :class="
	cn(
	  'border-input placeholder:text-muted-foreground focus-visible:ring-ring flex h-9 w-full rounded-md border bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',props.class
	)
   "
  />
</template>