In vue js, @change event is calling twice because of v-model, but i need both @change event and v-model but it should call only once

<v-file-input v-model="files" @change="data($event)" :error="error" >

    async data(file) {
                if (!file) {
                const documentEntityId = this.$store.getters["userData/userData"][this.entityCode] ?
                    this.$store.getters["userData/userData"][this.entityCode].entityId :
undefined;
                if (documentEntityId) {
                    const deleteItem = await CommonService.deleteDocument(`${documentEntityId}`);
                    this.$store.getters["userData/userData"][this.entityCode] = {};
                    store.dispatch("userData/setUserData", {
                        fileType: undefined,
                        file: undefined
                    });
                    store.dispatch("userData/setUserData", {
                        fileType: undefined,
                        file: undefined
                    });
                    this.files = [];
                    return;
                }

data , initially recieved as undefined, means if we click x to delete document, then once i changed this.files = [] before return. it is coming out of the function and again it is calling @change event because of v-model. please help me.