Vue: Change in behavior of watchers on arrays in Vue 2.x

[vlazar]

Vue.js version

2.1.10

Reproduction Link

https://jsfiddle.net/mLtzt9dn/1/

Steps to reproduce

Click Add new item link several times. Observe console output.

What is Expected?

In console you only see:

Add "new 3"
Add "new 4"

and so on each time you click Add new item link.

The "field.value" and "field" watchers are NOT executed.

This is a behavior for the same code in Vue 1.0.28 here https://jsfiddle.net/7fkvcp6h/1/

What is actually happening?

In console you see:

Add "new 3"
field.value: "two" -> "new 3"
field: { id: 2, value: "two" } -> { id: 3, value: "new 3" }

Add "new 4"
field.value: "new 3" -> "new 4"
field: { id: 3, value: "new 3" } -> { id: 4, value: "new 4" }
field.value: "two" -> "new 3"
field: { id: 2, value: "two" } -> { id: 3, value: "new 3" }

and so on each time you click Add new item link.

The "field.value" and "field" watchers are executed.

[yyx990803]

Make sure to key your lists: https://jsfiddle.net/mLtzt9dn/2/

http://vuejs.org/v2/guide/list.html#key

[vlazar]

Thanks a lot! And sorry for invalid issue. I'm new to Vue and migrating Vue 1.x codebase to Vue 2.x