Meituan-Dianping/mpvue · warning

The computed property "${key}" is already defined in data.

Error message

The computed property "${key}" is already defined in data.

What it means

When initializing computed properties, Vue checks whether the key already exists on the instance; if it comes from instance data (vm.$data), the computed definition would be shadowed/conflict with reactive data, so Vue warns and skips defining the computed.

Source

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

      if (getter === undefined) {
        warn(
          ("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

View on GitHub (pinned to 6c5d78ee04)

Solutions

1. Remove the data entry and keep only the computed
2. Rename one of the two keys
3. If computed should derive from the data value, give the computed a distinct name

Example fix

// before
data() { return { total: 0 }; },
computed: { total() { return this.a + this.b; } }
// after
computed: { total() { return this.a + this.b; } }

function checkComputedDataCollisions(options) {
  const dataKeys = Object.keys(typeof options.data === 'function' ? options.data() : (options.data || {}));
  return Object.keys(options.computed || {}).filter(k => dataKeys.includes(k));
}

When it happens

Trigger: A key with the same name appears in both data() and computed of the same component (or merged via mixin), e.g. data() { return { total: 0 } } and computed: { total() {...} }.

Common situations: Mixin merges adding a computed that collides with component data, renaming refactors leaving stale data keys, or generated options where both sections are derived from the same schema field.

Related errors

• The computed property "${key}" is already defined in data.
• method "${key}" has already been defined as a data property.
• The data property "${key}" is already declared as a prop. Us
• The computed property "${key}" is already defined as a prop.
• The computed property "${key}" is already defined as a prop.

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