Quasar q-input element not emitting event on change of input (vuejs)

Question

Here I've two-component ModalName.vue which is a child component and AddTask.vue which is parent component. Inside ModalName.vue (Child component) if I emit an event on change of input using HTML <input /> element to update the state in the parent component, it works perfectly but if I use quasar component ie <q-input /> then it doesn't emit the event. What's wrong with this code.

ModalName.vue

<template>
    <div class="row q-mb-sm">
        <!-- <input :value="name" @input="$emit('changeName:name', $event)"/> -->
        <q-input
            :value="name" 
            @input="$emit('changeName:name', $event)"
        />
    </div>
</template>

<script>
    export default {
        props: ["name"],
    }
</script>

AddTask.vue

<template>
    <ModalName 
       v-model:name="taskToSubmit.name" 
       @changeName:name="(e)=>taskToSubmit.name = e.target.value"
    />
</template>

<script>
    export default {
        data(){
            return{
                taskToSubmit:{
                    name: '',
                    dueDate: '',
                    dueTime: '',
                    completed: false
                }
            }
        },
        components:{
          ModalName: require('./shared/ModalName.vue').default
        }
    }
</script>

Answer 1

May try

        <q-input
            :value="name" 
            @input="(val) => $emit('changeName:name', val)"
        />

the parameter passed by @input event is the changed data, not event

Answer 2

It used to work on Quasar v1 like this but Quasar v2 (Vue 3) changed this behavior and @input is not triggered anymore. This how to do that now:

<q-input
    :value="name" 
    @update:model-value="newValue => $emit('changeName:name', newValue)"
/>

It is also required to set emits: ['changeName:name']

Refs.:

• https://quasar.dev/start/upgrade-guide#vue-3-breaking-changes-examples
• https://vuejs.org/guide/components/events.html#usage-with-v-model (thanks Mr. R)