Trying to make mask for positive and negative numbers only

[sakon54321]

Hi I'm trying to create a component that will just allow a user to enter either a positive or negative number. Here's what I've done. It only seems to work if I remove the mask altogether but then user can enter alpha or anything else. When I just use a # mask or even a [-]# mask it resets the number to a positive immediately. Not sure what I'm doing wrong. Is there any documentation on the masks it seems like the options provided in the docs are limited to just a few things.

<template>
  <q-input
    reverse-fill-mask
    :color="color"
    :dark="dark"
    autogrow
    dense
    outlined
    v-model="number"
    :label="label"
    :mask="mask"
  >
    <template v-slot:prepend>
      <div class="row items-center">
        <q-icon :name="icon" />
        <q-icon :name="isNegative ? 'mdi-minus-thick' : 'mdi-plus-thick'" @click.stop="changeSign" :size="dense ? 'xs' : 'sm'" />
      </div>
    </template>
    <template v-slot:append>
      <q-icon v-if="number" name="cancel" @click.stop="clearNumber" :size="dense ? 'xs' : 'sm'" />
    </template>
  </q-input>
</template>

<script>
import { ref, computed, onMounted, onBeforeMount, onUnmounted, watch } from 'vue'

export default {
  props: {
    modelValue: {
      type: String
    },
    icon: {
      type: String
    },
    label: {
      type: String
    },
    color: {
      type: String,
      default: 'grey-2'
    },
    dark: {
      type: Boolean,
      default: false
    },
    dense: {
      type: Boolean,
      default: false
    }
  },

  emits: [
    'update:modelValue'
  ],

  setup (props, { emit }) {
    const number = ref('')
    const mask = ref('#')

    const isNegative = computed(() => {
      return number.value ? number.value.startsWith('-') : false
    })

    const changeSign = () => {
      console.log('changeSign')
      console.log(isNegative.value)

      if (!isNegative.value) {
        console.log('Make Negative')
        mask.value = '[-]#'
        number.value = '-' + number.value
        console.log(number.value)
      } else {
        console.log('Make Positive')
        mask.value = '#'
        number.value = number.value.replace(/^[-]/, '')
        console.log(number.value)
      }
    }

    const clearNumber = () => {
      console.log('clearNumber')
      number.value = ''
      console.log('number' + number.value)
    }

    onBeforeMount(() => {
      number.value = props.modelValue
    })

    onMounted(() => {
      emit('update:modelValue', number)
    })

    onUnmounted(() => {
      clearNumber()
    })

    watch(number, () => {
      console.log('Saw number change' + number.value)
      emit('update:modelValue', number.value)
    })

    return {
      number,
      changeSign,
      clearNumber,
      isNegative,
      mask
    }
  }
}
</script>