I have a customer object as my initial data. I have text fields that when someone starts typing, it adds different keys to the object. When a new key is added, the watcher fires properly but if the key is edited from an existing value, it will not.

So if I go to type in a street address, the key street_address1 is added to the customer object so the watcher fires. If I start editing the street address though, it won't fire anymore.

template

<v-container>
  <v-col cols="12">
    <h2>Contact</h2>
    <div>Email Adderss</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</div>
        <v-text-field
          outlined
          v-model="customer.first"
          >
        </v-text-field>
      </v-col>
      <v-col cols="6">
        <div>Lasts</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
},

I have a customer object as my initial data. I have text fields that when someone starts typing, it adds different keys to the object. When a new key is added, the watcher fires properly but if the key is edited from an existing value, it will not.

So if I go to type in a street address, the key street_address1 is added to the customer object so the watcher fires. If I start editing the street address though, it won't fire anymore.

template

<v-container>
  <v-col cols="12">
    <h2>Contact</h2>
    <div>Email Adderss</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</div>
        <v-text-field
          outlined
          v-model="customer.first"
          >
        </v-text-field>
      </v-col>
      <v-col cols="6">
        <div>Lasts</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
},

• javascript
• vue.js
• object
• vuejs2
• vue-ponent

1 Answer 1

It's a syntax issue. The deep property isn't registered because it's incorrectly located outside of the watch, as though it was a 2nd watch.

Use object syntax for the customer watch. The object should have two properties:

• a handler method (must be named "handler", as in the watch docs)
• the deep property

watch: {
  customer: {
    handler (newData) {
      console.log("test", newData)
    },
    deep: true
  }
}

^{It could also have an immediate: true property if you wanted the watch to run when the ponent is first created.}