why vue change specific array member not update dom

Vue is pretty explicit about this. It's a JavaScript limitation. JavaScript does not support the ability to detect when an array element changes, only when arrays change size as a result of adding or removing elements. Therefore replacing an element is not detectable.

What Vue does behind the scenes is sets up mechanics to watch for when objects change, which is something JavaScript does support. So array elements that are objects are things Vue can detect changes for. Since Vue cannot detect an array element being replaced, it doesn't know to stop looking at the old object and start looking at the new one.

The answer is also well-documented: if you want to update an item in an array, then use Vue.set(). This allows Vue to know that the array element is changing, so it knows to stop looking at the old object and start looking at the new one.

The solution therefore looks something like this:

Vue.set(this.cart, 0, {nums: 5, price: 5});