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

Same collision check as data: if a computed key matches a declared prop, Vue skips defineComputed and warns, because the prop is set up earlier and the computed would never be reachable under that name on the instance.

Source

Thrown at packages/weex-vue-framework/factory.js:3207

          ("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);
      }
    }
  }
}

function defineComputed (target, key, userDef) {
  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 (e.g. formattedFoo) and derive it from the prop
  2. Delete the computed if it duplicates the prop's value
  3. Move the derived logic into a method if the name must stay

Example fix

// before
props: ['user'],
computed: { user() { return this.$store.state.user; } }
// after
props: ['user'],
computed: { storeUser() { return this.$store.state.user; } }
Defensive patterns

Strategy: validation

Validate before calling

function checkComputedPropCollisions(options) {
  const props = options.props || [];
  const propNames = Array.isArray(props) ? props : Object.keys(props);
  return Object.keys(options.computed || {}).filter(k => propNames.includes(k));
}

Prevention

When it happens

Trigger: computed: { foo() {...} } where foo is also declared in the props option of the component.

Common situations: Naming a computed after a prop to 'transform' it (use a differently named computed instead), mixins providing computed keys that overlap props, code generators emitting prop and computed with the same identifier.

Related errors


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