Meituan-Dianping/mpvue · error

Avoid mutating a prop directly since the value will be overw

Error message

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: "${key}"

What it means

Error "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: "${key}"" thrown in Meituan-Dianping/mpvue.

Source

Thrown at src/core/instance/state.js:94

  // instead of dynamic object key enumeration.
  const keys = vm.$options._propKeys = []
  const isRoot = !vm.$parent
  // root instance props should be converted
  observerState.shouldConvert = isRoot
  for (const key in propsOptions) {
    keys.push(key)
    const value = validateProp(key, propsOptions, propsData, vm)
    /* istanbul ignore else */
    if (process.env.NODE_ENV !== 'production') {
      if (isReservedAttribute(key) || config.isReservedAttr(key)) {
        warn(
          `"${key}" is a reserved attribute and cannot be used as component prop.`,
          vm
        )
      }
      defineReactive(props, key, value, () => {
        if (vm.$parent && !isUpdatingChildComponent) {
          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: "${key}"`,
            vm
          )
        }
      })
    } else {
      defineReactive(props, key, value)
    }
    // static props are already proxied on the component's prototype
    // during Vue.extend(). We only need to proxy props defined at
    // instantiation here.
    if (!(key in vm)) {
      proxy(vm, `_props`, key)
    }
  }

View on GitHub (pinned to 6c5d78ee04)

Solutions

1. Define a local data property initialized from the prop and mutate that: props: ['initialCount'], data() { return { count: this.initialCount } }
2. Use a computed property that derives the transformed value from the prop
3. For true two-way binding, emit an event to the parent (v-model pattern) and let the parent update the source
4. If passing objects down, mutate a deep copy made in data(), never the prop object itself

When it happens

Trigger: Thrown at src/core/instance/state.js:94 when the library encounters an invalid state.

Common situations: See trigger scenarios.

AI-assisted analysis of Meituan-Dianping/mpvue@6c5d78ee04 (2026-09-02). Data as JSON: /api/errors/37ef1a7e6bf5dd61. Report an issue: GitHub.