Vue 3.5 Reactive Props and Why You Should Care

The problem we all had

Every Vue developer has written this bug at least once:

const { count } = defineProps(["count"]) watch(count, (val) => console.log(val)) // never fires

Destructuring props broke reactivity. You had to use props.count or toRefs(props) everywhere. It was a constant source of confusion, especially for developers coming from React.

What Vue 3.5 fixed

The compiler now transforms destructured props into reactive references automatically. The code above just works. No toRefs, no props. prefix, no gotchas.

Default values got better too

const { count = 0, items = [] } = defineProps(["count", "items"])

JavaScript-native defaults replace the verbose withDefaults API. Less boilerplate, more readable code.

The practical impact

This is not just syntactic sugar. It eliminates an entire category of reactivity bugs. Junior developers no longer need to learn the "props destructuring trap." Code reviews get simpler. Components get cleaner.

If you are still on Vue 3.4, this alone is worth the upgrade.