My initial data consists of a `customer` object. As I input text into various fields, different keys are added to the object. The watcher function triggers properly when a new key is added, but if an existing key is edited with a new value, the watcher does not fire.
For example, adding the `street_address1` key to the `customer` object triggers the watcher, but editing the street address thereafter won't trigger it anymore.
Template
<v-container>
<v-col cols="12">
<h2>Contact</h2>
<div>Email Address</div>
<v-text-field
outlined
v-model="customer.email"
>
</v-text-field>
</v-col>
<v-col cols="12">
<v-row>
<v-col cols="6">
<div>First Name</div>
<v-text-field
outlined
v-model="customer.first"
>
</v-text-field>
</v-col>
<v-col cols="6">
<div>Last Name</div>
<v-text-field
outlined
v-model="customer.last"
>
</v-text-field>
</v-col>
</v-row>
</v-col>
<v-col cols="12">
<div>Shipping Address Line 1</div>
<v-text-field
outlined
v-model="customer.street_1"
>
</v-text-field>
</v-col>
<v-col cols="12">
<div>Shipping Address Line 2</div>
<v-text-field
outlined
v-model="customer.street_2"
>
</v-text-field>
</v-col>
</v-container>
Script
data() {
return {
customer: {}
};
},
watch: {
customer(newData) {
console.log("test", newData)
},
deep: true
},