Update model value doesn't work correctly

Question

I'm using v-model to connect two components.

I'm trying to pass value to father components and first gave me undefined. I changed code like second and that worked. My question is this: why does not worked in script > methods section.But worked in html section

My UI-component code is like this :

<template> 
  <input
    :value="modelValue"
    type="text"
    class="form-control"
  />
</template>
<script>
export default {
  name: "Input",
  props: {
    modelValue: [String, Number],
  },
   methods: {
     uptadeInput(e) {
       this.$emit("uptade:modelValue", e.target.value);
     },
   },
};
</script>
<style></style>

That did not work and changed code like this :

<template>
  <input
    :value="modelValue"
    @input="$emit('update:modelValue', $event.target.value)"
    type="text"
    class="form-control"
  />
</template>
<script>
export default {
  name: "Input",
  props: {
    modelValue: [String, Number],
  },
};
</script>

That worked in html section.

Answer 1

In the first example you never call the 'uptadeInput' method. To call the method from the input event:

<input
    :value="modelValue"
    @input="uptadeInput"
    type="text"
    class="form-control"
/>

In the second example you calling $emit from the input event.