Reactivity Loss On Destructuring (ARCH3321)

Key typescript.vue.reactivity-loss · Severity error · Category quality

Vue: flags destructuring of props / reactive() / a store, which copies values out of the reactive object so they never update again. toRefs / storeToRefs keep the link.

Incorrect

<script setup lang="ts">
const props = defineProps<{ user: User }>();
const { user } = props;
</script>

Correct

<script setup lang="ts">
const props = defineProps<{ user: User }>();
const { user } = toRefs(props);
</script>