`change` event happens before `v-model` updates the value

[bhaidar]

Version

3.0.0-rc.7

Reproduction link

https://codesandbox.io/s/suspense-vue3-4vgle

Steps to reproduce

1. Select a country from the dropdown list
2. No data for the selected country is shown
3. Select another country
4. The data for the first country selected is now shown

What is expected?

The first time the country is selected to show data for that country right away

What is actually happening?

1. The first time I select a country, the selectedCountry ref variable is showing as an object with the property value set to the country selected.
2. When the code tries to access selectedCountry.value it returns null. Although when I debug in the DevTools, the selectedCountry is a valid object with the value property set to the country selected.

---

I expect the v-model on the select to automatically bind to the selectedCountry the first time I select a value.

[skirtles-code]

<select id="country" v-model="selectedCountry" @change="fetchData">

I believe the problem is that the change listener is being called before v-model updates selectedCountry.

[posva]

Marked as a bug because it works on Vue 2

[peng]

@bhaidar Can you show a full example. I saw no select in your example code. Fetch data have cors problem. Use fake data replace

[skirtles-code]

@peng It seems the CodeSandbox example has been changed since it was first posted.

Here's an example of the same problem:

https://jsfiddle.net/skirtle/24jk3roL/