Vue 3 change event in v-select notwoking

i'm using vue3 and i don't know why i cant watch v-select's change

Can someone help. Thanks a lot

I tried

//test
Ex 1 :<VSelect
v-model="test"
:items="items_status"
@update:data.status="changeSelecterStatus"
@input="changeSelecterStatus"
@change="changeSelecterStatus"
on-change="changeSelecterStatus"
v-on:change="changeSelecterStatus"
v-on:input="changeSelecterStatus"
v-change="changeSelecterStatus()"
item-title="state"
item-value="abbr"
label="Select"
persistent-hint
return-object
single-line
/>

Only v-change works, however it only works when it's changeSelecterStatus() and not working with changeSelecterStatus
owever if i use v-change="eventMethod()" it will give me a bunch of events, because when initializing the component it already loads the data change api, so when i do nothing it already runs x2 the total event of the total data I have. And here I use selecter for multiple columns of data generated by for loop so every time I change any selecter it will give me a series of events with number of executions = total number of selecters on my page

Ex 2: <VCol
v-for="data in datas"
:key="data.id"
>
<VSelect
v-model="data.status"
:items="items_status"
@update:data.status="changeSelecterStatus"
@input="changeSelecterStatus"
@change="changeSelecterStatus"
on-change="changeSelecterStatus"
v-on:change="changeSelecterStatus"
v-on:input="changeSelecterStatus"
v-change="changeSelecterStatus"
item-title="state"
item-value="abbr"
label="Select"
persistent-hint
return-object
single-line
/>
//same
<v-select v-model="data.status" 
@update:data.status="changeSelecterStatus"
@input="changeSelecterStatus"
@change="changeSelecterStatus"
on-change="changeSelecterStatus"
v-on:change="changeSelecterStatus"
v-on:input="changeSelecterStatus"
v-change="changeSelecterStatus()"
:items="items_status" item-title="state" item-value="abbr" label="Select" return-object single-line>
<template v-slot:selection="{ item }">
{{ getTextFromCodeStatus(item) }}
</template>
<template #item="{ item, props }">
<v-list-item v-bind="{ ...props, title: undefined }">
{{ item.title }}
</v-list-item>
</template>
</v-select>
changeSelecterStatus: function(){
console.log("task");
},
v-change="changeSelecterStatus()" 
-> onload component : return task(data.lenght*2 time)
-> try to choose an option : return task(data.lenght*1 time)

Updated :
seems like v-change can work properly if it can determine the correct data based on data.status and key being its data.id, because of the number times the function is run = number of selectors with v-model="v-model of that selecter"

Ex1 -> load component : return 1 tỉme because 'test' specified at default data does not have to be loaded from the api

Ex2 
-> onload component : return task(data.lenght*2 time)
-> try to choose an option : return task(data.lenght*1 time)

As per the Vuetify library, we couldn't expect a change event to trigger.

VSelect

 component offer @update:modelValue event to listen to options modifications. 
<template>
<v-app>
<VCol v-for="data in datas" :key="data.id">
<VSelect
chips
label="Testing"
v-model="data.status"
:items="data.items"
@update:modelValue="onValueChange"
></VSelect>
</VCol>
</v-app>
</template>
<script setup>
import { ref } from 'vue'
const datas = ref([{id: 1, status: 1, items:[1,2,3]}, {id:2,  status: 2, items:[1,2,3]}, {id:3,  status: 3, items:[1,2,3]}]);
function onValueChange(v) {
console.log("Value updated ", v)
}
</script>

You can find same at below Vuetify playground.

https://play.vuetifyjs.com/#eNqlVE1v4jAQ/SsjXwpSPhbYU5ZWrPgJu+oFc3CTAbxNbMt2sqoQ/33HdmCB9lCpyiEznjfz5j1H2RzZT2OKoUdWsaXHzrTC4xNXAMshF8bEEJbPa93CkO+0feSsEV6AVBDejjOoXvFtPC5kw1nqCV2/sMXajylAfZDGXbJWvGBLfb/Rean2nHHFfXiIqNNNrMWZzgvfE9G5s5K0qLswhuR/cdUbOsYqTngWbY8E1CpG64NQe7xgn5bluOGosgwyk/jyrH5ZXrlCqautNB4c+j6UZWe09XAEizs4wc7qDh7IzocArrVyPtkEjwEx2RxlU8Esg6QphlFAtZll82yxPWUQIPMMLhCKP4IsriAU30K20x9BBle7XtVeagU3FkyGKRwDIGyoWyxavZ9wFhGQDGyAswyGKVenYEKSTYJZxpLmvBOm+OO0oi8nzuJjgS6jStPDGXkRcs4O3htXlWXdKGqjy5GDLRT6UpmuXBGstL3yssO80d1qUSyKb7lozUEUs3nZSOev6wW6Ln+x+q9DS9No1Ss+L3dvn+AckUQ1K2bfE8V4ltO36QLHu9klEQ5oc4uqQYv2s9ru2j7Ud4d5pzGsQZdxoitopXp1d+7XLjq/OW/7NfFxWhi1TYxr3Z3/E+yUsdv9qZ4Gse0/q/5syg==

There is no native v-change Vue Directive

But it works, since you have

@change="changeSelecterStatus"
v-on:change="changeSelecterStatus"

Which are doing the same thing: @ is a shortcut for v-on, so @change = v-on:change

The v-change and on-change have no effect and do nothing.

Replace all this

on-change="changeSelecterStatus"
v-on:change="changeSelecterStatus"
v-on:input="changeSelecterStatus"
v-change="changeSelecterStatus()"

with

  @change="changeSelecterStatus"

It is enough to catch the onChange event.