Prop Mutation (ARCH3320)

Key typescript.vue.prop-mutation · Severity error · Category quality

Vue: flags an assignment to a prop. The parent owns that value - the child’s change is silently overwritten on the next parent render.

Incorrect

<script setup lang="ts">
const props = defineProps<{ count: number }>();
function increment() {
  props.count++;
}
</script>

Correct

<script setup lang="ts">
const props = defineProps<{ count: number }>();
const emit = defineEmits<{ (e: "update:count", value: number): void }>();
function increment() {
  emit("update:count", props.count + 1);
}
</script>