Weird @change and v-model issue

[Not-Net]

Hey, I was trying to build something and I faced a weird issue.
When I add a new tag and i try to access the values in a function that get executed in the @change event. I noticed that the recent added tag is missing.
I created this only to demonstrate the issue!

<template>
    <div class="col-6">
        <label class="form-label mb-1">Values</label>
        <Multiselect            
            mode="tags"
            :caret="false"
            :show-options="false"
            :create-option="true"
            :searchable="true"
            :can-clear="false"
            :object="true"
            v-model="values"
            @change="func"
        />
    </div>
</template>

<script>
import Multiselect from '@vueform/multiselect'

    export default {
        data(){
            return{
                values:[
                    {
                        value:'value1',
                        label:'value1'
                    },
                    {
                        value:'value2',
                        label:'value2'
                    },
                ]
            }
        },
        methods:{
            func(){
                console.log(this.values)
            }
        },
        components:{
            Multiselect
        }
    }
</script>

As you see on the image, when i added a new tag, it don't get printed on the console.
its like the @change event get executed before v-model !

How can i access all values in this func() function ?

[adamberecz]

This is because the func seems to run before @update:modelValue (which updates the this.values) so you're indeed logging the yet untouched values. You might rely on the @change callback's first param which is the updated value or add nextTick before accessing this.values.