Select doesn't always get updated model value when using @update:modelValue or @update:model-value

[Bond-Addict]

In the sandbox it works correctly.
https://codesandbox.io/p/sandbox/nice-darwin-iqjx2m

But my local code isn't working. It works on every other component but this new one is having an issues.

1. @update:modelValue or @update:model-value calls my function, but the reactive property doesn't show any value until you change the selection a second time and it then show the value as the previously selected option.
2. use watch only seems to get hit if I'm also using one of the methods for hooking into the update event.

I've testing using a reactive or even a ref.

Bellow is psudocode of my compoent.

<script setup lang="ts">
import { reactive } from 'vue';

const state = reactive({
  objects: [] as MyObject[],
  selectedValue: null as MyObject,
});

onMounted(async () => {
  state.objects = await getObjects();
});

const setValue = async () => {
  console.log(state.selectedValue);
  debugger;
}
</script>

<template>
    <va-select @update:modelValue="setValue" v-model="state.selectedCampaign" id="objectSelect"
      :options="state.objects" :text-by="(object: MyObject) => object.name" :loading="state.objects.length == 0"
      label="Object selection" placeholder="Please select a Object"></va-select>
</template>

<style lang="scss">
</style>

P.S. I've tried using a reactive prop on a different component and it works exactly how its supposed to. I can get it to work correctly if I pass $event to setValue or if I use the watch with a getter function. I tested using a html select and then using v-on:change to call my function which works exactly as expected. Is there something obvious I'm doing wrong? It seems as straight forward as the rest of the times I've used it on other components.

[m0ksem]

I think you mustn't use both v-model and @update:modelValue. If you want do something when value is updated, you need smth like this:

const value = ref()

watch(value, () => {

})

<VaSelect v-model="value" />

[asvae]

@m0ksem might be something related to how we manage events?

I.e. vue might allow for 2 events of same name, but we might have destructured it and one binding got overriden?

[m0ksem]

If listener registered before v-model, it will be called before v-model and because of that value can be old.

Here is example, you can change order of v-mode and @Listener

https://play.vuejs.org/#eNqFU9tq20AQ/ZXpUpAEikzJm2ubXjC0hbahLe1D1QdjjW2lq91ld6UYhP69M6PYUcBN3jSXM+fM7FGv3jpXdC2quVqEra9dhICxdavS1I2zPkIPHnc53G3i9gAD7LxtICFEcu54bxt3ny9mHPDA5HVpSrO1JkRowh6WPCZNPqDWFn5Zr6sXScYtMjillhzSLoPlChhkNRba7tNEykkOXc5jim6jW8wIuJiNckkoBREbpzcRKQJYHF6t+l5Yh2Exo0iyIvNN6yrqmze2Qn0l05alesSo6xDRoCfSl9ihicKclQq6K4ERgBIUz2jwYnbmVrmKgUbt6n1xG6yhm/bMzPMbV2v0X12siapUc5AK1zZ0kLtPkou+xfyU3x5w+/dC/jYcOVeqG48BfYelOtfixu8xjuX19y94pO9zkbS3mrqfKH5DOkPLGse2d62pSPakT9R+lHevzf5HWB/pVuG0FAvlzkH6S0U+4Kv/b/UHudfFteBKM9AVTx56ypR80jZi9ciSE885b10g11W4qw3ecJQKsTzhT354UsKE4sIRhE0dz5g1BSH9nUwdI7jkzwTSfeY8gU6CRhYA2izN5O+JrTejnuJhyP2NgDdj3/dCnl5gI+9ncplnXF8b4p94dFR2wabDP5BCV6w=

[m0ksem]

@Bond-Addict, from what I can see you should swap v-model and listener.
From

<va-select @update:modelValue="setValue" v-model="state.selectedCampaign"

to

<va-select v-model="state.selectedCampaign" @update:modelValue="setValue"

[Bond-Addict]

@m0ksem that's absolutely it. That being said, it would be really really good to add that to the docs for all the components that have that event listed. Especially for Va-Select it would be a huge help to have an example since v-on:change is what is normally used and @update:modelVue would be the equivalent and watchers could cause unexpected results by being called when its not intended.

I know the question has come up a couple times and seems to confuse folks, myself included.

[m0ksem]

@Bond-Addict, sure. You can add it wherever you want, I mean, you know better where to place helpful information as a user. Would appreciate a PR.

I think it would be better to proxy @change and @input events in all components, so it is obvious that @input @change events is what you need for all.