Vue watch on objects - vue.js

Question

I'm using Vue2 and I have a problem to compare objects. But when compare "newVal" and "oldVal" values are always the same.
Child componenet:
name: "List",
components: {
Pagination, UserDetails
},
props: {
filters: Object
},
watch: {
filters: {
handler(val, oldVal) {
console.log(JSON.stringify(val));
console.log(JSON.stringify(oldVal));
},
deep: true,
}
},
Parent Componenet:
<template>
<div>
<b-form inline>
<label class="sr-only" for="inline-form-input-name">Name</label>
<b-form-input
id="inline-form-input-name"
class="mb-2 mr-sm-2 mb-sm-0"
v-model="filters.username"
placeholder="Name"
></b-form-input>
<label class="sr-only" for="inline-form-input-username">Email</label>
<b-input-group class="mb-2 mr-sm-2 mb-sm-0">
<b-form-input
id="inline-form-input-username"
v-model="filters.email"
placeholder="Email"></b-form-input>
</b-input-group>
<b-button variant="danger">Clear</b-button>
</b-form>
<List :filters="filters"/>
</div>
</template>
<script>
import List from "./List";
export default {
name: "AdminUserList",
components: {
List,
},
data() {
return {
filters: {
username: '',
email: ''
},
}
},
}
</script>
<style lang="scss">
</style>
Result:
{"username":"d","email":""}
{"username":"d","email":""}

Answer 1

from the official doc you will find:
Note: when mutating (rather than replacing) an Object or an Array, the old value will be the same as new value because they reference the same Object/Array. Vue doesn’t keep a copy of the pre-mutate value.
vue js watcher DOC
one thing that you can do is to watch the object's property directly like:
Vue.config.productionTip = false;
Vue.config.devtools = false;
new Vue({
el: '#app',
vuetify: new Vuetify(),
data() {
return {
filters: {
name: '',
email: '',
},
};
},
watch: {
'filters.name' (newVal, oldVal) {
console.log(`new name: ${newVal}`, `, old name: ${oldVal}`);
},
'filters.email' (newVal, oldVal) {
console.log(`new email: ${newVal}`, `, old email: ${oldVal}`);
},
},
});
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
<div id="app">
<v-app>
<v-container>
<v-row class="px-5">
<v-text-field v-model="filters.name" outlined label="name"></v-text-field>
</v-row>
<v-row class="px-5">
<v-text-field v-model="filters.email" outlined label="email"></v-text-field>
</v-row>
</v-container>
</v-app>
</div>

Answer 2

Try to adjust watcher accordingly
watch: {
filters: {
handler: function(val, oldVal) {
console.log(JSON.stringify(val));
console.log(JSON.stringify(oldVal));
},
deep: true,
}
},
I have just followed documentation from the official website