I have a problem getting the data from my text field compenent

AddUnitModal.vue

<CustomInput
  label="Unit Name"
  inputId="unit"
  :required="true"
  v-model="unitName"
  :errors="errors.name"
  @input="handleValue"
/>

data() {
    return {
      unitName: '' as string,
      errors: {} as Record<string, string>, // Initialize errors object
    };
  },
methods: {
     handleValue(value: string) {
      console.log(value);
      this.unitName = value;
    }
}

when showing the value in log it will show the text that I input and followed by something like this:

test //here is the text that I Inputed and the message below is shown next to it and will be stored to “unitName”
AddUnitModal.vue:117
InputEvent {isTrusted: true, _vts: 1714439976907, data: ‘s’, isComposing: false, inputType: ‘insertText’, …}
isTrusted
:
true
_vts
:
1714439976907
bubbles
:
true
cancelBubble
:
false
cancelable
:
false
composed
:
true
currentTarget
:
null
data
:
“s”
dataTransfer
:
null
defaultPrevented
:
false
detail
:
0
eventPhase
:
0
inputType
:
“insertText”
isComposing
:
false
returnValue
:
true
sourceCapabilities
:
null
srcElement
:
input#unit.text-sm.p-2.text-blackpearl.rounded.w-full.border-2.mb-2
target
:
input#unit.text-sm.p-2.text-blackpearl.rounded.w-full.border-2.mb-2
timeStamp
:
2574
type
:
“input”
view
:
null
which
:
0
[[Prototype]]
:
InputEvent

TextInput.vue

<input v-model="inputValue" :id="inputId" :type="type" @input="updateValue($event.target.value)" class="text-sm p-2 text-blackpearl rounded w-full border-2 mb-2">

export default {
  props: {
    label: {
      type: String,
      required: true
    },
    inputId: {
      type: String,
      required: true
    },
    type: {
      type: String,
      default: "text"
    },
    required: {
      type: Boolean,
      default: false
    },
    errors: {
      type: String,
      default: ''
    },
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      inputValue: this.value
    };
  },
  methods: {
    updateValue(newValue) {
      this.inputValue = newValue;
      this.$emit('input', newValue);
    },
  },
  watch: {
    value(newValue) {
      this.inputValue = newValue;
    }
  }
};

I am trying to store my input text to “unitName”. and is there a work around to store it directly to “unitName” without using this:

handleValue(value: string) {
      console.log(value);
      this.unitName = value;
    }