Vue/Vuetify #change doesn't provide full $event object - vue.js

Question

I'm using Vuetify in a project and creating an edit-in-place experience. Switching between the span and text field works, and it correctly sends the update to my server. One last thing though before I can call this feature complete, is that I need to determine whether the original value of the input has changed from the new value so that I'm not posting to my server when I don't need to be.
<span
v-if="editableCategory !== `category${category.id}Ref`"
class="category-header"
#click="setCategoryEditing(`category${category.id}Ref`)">
<h4>{{ category.name }}</h4>
<v-icon small>
edit
</v-icon>
</span>
<v-text-field
v-else
:ref="`category${category.id}Ref`"
:value="category.name"
color="primary"
dense
hide-details
type="text"
outlined
#blur="updateCategory(category, $event)"
#change="updateCategory(category, $event)" />
The problem is that when when I console log the $event, I get two different responses when testing the #change and the #blur. The #blur seems to give me the normal, full event object and I am then able to compare old and new values correctly. However, the #change event simply gives me a string of the new value.
Is this an issue with the Vuetify v-text-field #change event not firing correctly (and I should therefore create a Github issue with them?), or am I totally misunderstanding blur/change events (also another very real possibility)?

Answer 1

Blur event usually returns the event from the element attached. But the change event returns the updated value from the input element
but still you can able to read the updated value from the blur event using the below approach
Working codepen here, check the console for expected output: https://codepen.io/chansv/pen/JjjaZOJ?editors=1010
<div id="app">
<v-app id="inspire">
<v-form>
<v-container>
<v-row>
<v-col cols="12" sm="6" md="3">
<v-text-field
label="Outlined"
placeholder="Placeholder"
outlined
#change="updateCategory($event, category)"
#blur="updateCategory($event.target.value, category)"
></v-text-field>
</v-col>
</v-row>
</v-container>
</v-form>
</v-app>
</div>
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: {
category: 'category text',
},
methods: {
updateCategory(event, category) {
console.log(event, category);
},
}
})