Meituan-Dianping/mpvue · warning

The computed property "${key}" is already defined as a prop.

Error message

The computed property "${key}" is already defined as a prop.

What it means

Vue dev-mode warning thrown by initComputed when a computed property name is already declared in the props option. Props are set on the instance before computed is initialized, so the computed definition is skipped to avoid shadowing the prop.

Source

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

          `No getter function has been defined for computed property "${key}".`,
          vm
        )
        getter = noop
      }
    }
    // create internal watcher for the computed property.
    watchers[key] = new Watcher(vm, getter, noop, computedWatcherOptions)

    // component-defined computed properties are already defined on the
    // component prototype. We only need to define computed properties defined
    // at instantiation here.
    if (!(key in vm)) {
      defineComputed(vm, key, userDef)
    } else if (process.env.NODE_ENV !== 'production') {
      if (key in vm.$data) {
        warn(`The computed property "${key}" is already defined in data.`, vm)
      } else if (vm.$options.props && key in vm.$options.props) {
        warn(`The computed property "${key}" is already defined as a prop.`, vm)
      }
    }
  }
}

export function defineComputed (target: any, key: string, userDef: Object | Function) {
  if (typeof userDef === 'function') {
    sharedPropertyDefinition.get = createComputedGetter(key)
    sharedPropertyDefinition.set = noop
  } else {
    sharedPropertyDefinition.get = userDef.get
      ? userDef.cache !== false
        ? createComputedGetter(key)
        : userDef.get
      : noop
    sharedPropertyDefinition.set = userDef.set
      ? userDef.set
      : noop

View on GitHub (pinned to 6c5d78ee04)

Solutions

1. Rename the computed property to a distinct name
2. Keep the prop and drop the computed, using the prop directly
3. Use a scoped slot or wrapper component if you must transform the prop under the same name
4. Audit mixins for computed keys that match props

Example fix

// before
export default {
  props: ['fullName'],
  computed: { fullName() { return this.first + ' ' + this.last } }
}
// after
export default {
  props: ['first', 'last'],
  computed: { fullName() { return this.first + ' ' + this.last } }
}

function checkComputedPropsCollision(options) {
  const propKeys = (options.props || []).concat(Object.keys(options.props || {}))
  return Object.keys(options.computed || {}).filter(k => propKeys.includes(k))
}

function hasNoComputedPropsCollision(options) { return checkComputedPropsCollision(options).length === 0 }

When it happens

Trigger: Declaring the same key in both the props option and the computed option, e.g. props:['value'] plus computed:{value(){...}}; also via mixin merge introducing a computed with a prop's name.

Common situations: Wrapping or transforming a prop value and lazily reusing the prop name; converting a prop to computed during refactor; component libraries whose prop names collide with consumer-side computed additions.

Related errors

• The computed property "${key}" is already defined as a prop.
• The computed property "${key}" is already defined in data.
• Avoid mutating a prop directly since the value will be overw
• The data property "${key}" is already declared as a prop. Us
• The computed property "${key}" is already defined in data.

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