Vue.set weird behaviour, is it a bug?


#1
<template>
	<div ref="test">
		<button @click="$set(foo, 'b', 'z')">{{JSON.stringify(foo)}}</button>
		<br />
		<button @click="$set(foo, 'e', 'e')">{{JSON.stringify(foo)}}</button>
	</div>
</template>

<script>
	export default {
		name: "Test",
		components: {},
		data() {
			return {
				foo: {
					b: 'b',
				}
			};
		},
		watch: {
			foo(to, from) {
				console.log('watched');
			}
		},
	};
</script>

<style lang="scss" scoped>
</style>

watcher is not triggered when first button is pressed while the second one does.

Seems Vue.set only trigger watcher if it is adding a new property?


#2

Vue doesn’t trigger changes when a new property is set to an object.


#3

But the problem is… it DOES trigger changes when a new property is set to foo and it DOESN’T trigger changes when mutating a old property.

Also, refer to the document you quoted, object does trigger changes when I add new property by Vue.set()


#4

I think the way this works is it only checks if there are new properties added to root of an object. It is not tracking the change of the value of the object properties. If you set deep to true it will trigger the watcher. See example below.