How to Properly Watch for Nested Data in VueJS ?
Last Updated :
28 Apr, 2025
In Vue.js, we can watch the nested data to properly control the changes within the nested properties. In this article, we will explore both of the approaches with the practical implementation of these approaches in terms of examples and outputs.
We can watch this by using two different approaches:
Approach 1: Using deep: true Option
In this approach, we are using the deep: true option in the watcher to properly watch changes within the nested Data Structures. This makes sure that the changes to the deeply nested properties like user.name, trigger the handler function.
Syntax:
new Vue({
watch: {
'nestedDataProperty': {
handler: function(newValue, oldValue) {
// Tasks
},
deep: true
}
}
});Example: Below is the implementation of the above-discussed approach.
HTML
<!DOCTYPE html>
<head>
<title>Example 1</title>
<script src=
"https://cdn.jsdelivr.net/npm/vue@2">
</script>
</head>
<body>
<div id="app">
<h1 style="color:green">
GeeksforGeeks</h1>
<h3>Approach 1: Using deep:true Option</h3>
<p>Name: {{ user.name }}</p>
<p>Age: {{ user.age }}</p>
<input v-model="newName"
placeholder="Enter new name">
<button @click="changeName">Update Name</button>
<p v-if="dataChanged" style="color: green;">
Data has changed!
</p>
</div>
<script>
new Vue({
el: '#app',
data: {
user: {
name: 'GFG USER',
age: 23
},
newName: '',
dataChanged: false
},
watch: {
user: {
handler: function (newValue, oldValue) {
console.log('User data is changed!', newValue);
this.dataChanged = true;
},
deep: true
}
},
methods: {
changeName: function () {
this.user.name = this.newName;
this.newName = '';
this.dataChanged = false;
}
}
});
</script>
</body>
</html>
Output:
Approach 2: Using Computed Property
In this apporach, we are using the computed property to watch the nested data. We have the personName and personage computed properties which allows the 2 directional binding, this enabes the reactivity to changes in the nested objects like name and age properies by providing the clear separation.
Syntax:
new Vue({
data: {
nestedData: {
property1: 'value1',
property2: 'value2'
}
},
computed: {
computedProperty: {
get: function() {
// getter logic
},
set: function(newValue) {
// setter logic,
}
}
}
});Example: Below is the implementation of the above-discussed approach.
HTML
<!DOCTYPE html>
<head>
<title>Example 2</title>
<script src=
"https://cdn.jsdelivr.net/npm/vue@2">
</script>
</head>
<body>
<div id="app">
<h1 style="color: green">GeeksforGeeks</h1>
<h3>Approach 2: Using Computed Property</h3>
<p>Geek Name: {{ personName }}</p>
<p>Geek Age: {{ personAge }}</p>
<input v-model="person.name"
placeholder="Enter the name">
<input v-model="person.age"
placeholder="Enter the age" type="number">
</div>
<script>
new Vue({
el: '#app',
data: {
person: {
name: '',
age: null
}
},
computed: {
personName: {
get: function () {
return this.person.name;
},
set: function (newName) {
this.person.name = newName;
console.log('Name changed:', newName);
}
},
personAge: {
get: function () {
return this.person.age;
},
set: function (newAge) {
this.person.age = newAge;
console.log('Age changed:', newAge);
}
}
}
});
</script>
</body>
</html>
Output:
Similar Reads
How to listen for Prop Changes in VueJS ? In Vue.js, props provide the mechanism for parent components to share data with their child components. While props themselves are reactive, meaning changes in the parent component automatically trigger a re-render of the child component, sometimes we might need to react to specific prop changes wit
3 min read
How to Add Multiple Data Types for Props in VueJS ? Props are used to pass the data from the parent component to the child component. We can pass the multiple data types for props by using the type option or by using the Dynamic props. In this article, we will see the practical implementation of adding multiple data types for props in VueJS. Table of
3 min read
Vue.js Prop One-Way Data Flow In VueJS, all the props are bonded between the child and properties is one-way-down. When we update the prop in the parent component, it is updated to all the child components, but the reverse does not happen and VueJS warns the use. This is used as protection from altering the state of a parent-by-
3 min read
How to write and use for loop in Vue js ? Vue.js is one of the best frameworks for JavaScript like ReactJS. The VueJS is used to design the user interface layer, it is easy to pick up for any developer. It is compatible with other libraries and extensions as well. If you want to create a single-page application then VueJS is the first choic
4 min read
How to Loop X Times with v-for in VueJS? Vue.js is a progressive JavaScript framework widely used for building user interfaces. One of its core features is the v-for directive, which allows you to iterate over data or render a block of elements a specified number of times. we will explore various ways to loop X times using v-for in Vue.js.
3 min read
How to Watch Store Values from Vuex ? VueJS is one of the best frameworks for JavaScript like ReactJS. The VueJS is used to design the user interface layer. It is compatible with other libraries and extensions as well. In this article, we will learn How to watch store values from Vuex. Table of Content Using Vue optionsUsing ComponentsA
3 min read