Props of a Vue component should not be mutated

• VUE_MUTATED_PROP
• Code Quality
• Medium
• vue

This rule applies when a prop of a Vue component is mutated inside the component.

If a prop is mutated, Vue outputs a warning message because the mutated prop value will be overwritten whenever the parent component re-renders.

If mutation is required, it is recommended to create a data or computed property based on the prop's value.

Noncompliant Code Example

<template>
  <div>
    <div>{{ x = 42 }}</div> <!-- VUE_MUTATED_PROP alarm -->
    <input v-model="y"/> <!-- VUE_MUTATED_PROP alarm -->
  </div>
</template>

<script>
export default {
  props: ["x", "y"],
  methods: {
    bar() {
      this.x = this.x || []; // VUE_MUTATED_PROP alarm
    }
  }
}
</script>

Compliant Code Example

<template>
  <div>
    <div>{{ a = 42 }}</div>
    <input v-model="b"/>
  </div>
</template>

<script>
export default {
  props: ["x", "y"],
  data() {
    return {
      a: this.x,
      b: this.y
    };
  },
  methods: {
    bar() {
      this.a = this.a || [];
    }
  }
}
</script>

Version

This rule was introduced in DeepScan 1.41.0.

See

• One-Way Data Flow

• [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "x"