The data property "${key}" is already declared as a prop. Us

Error message

The data property "${key}" is already declared as a prop. Use prop default value instead.

What it means

For each data key, Vue checks if it is already a declared prop; if so it warns that the data declaration is redundant and will not proxy it, pointing to the prop's default value mechanism instead. Props are initialized before data, so the data property would shadow or duplicate the prop.

Source

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

    );
  }
  // proxy data on instance
  var keys = Object.keys(data);
  var props = vm.$options.props;
  var methods = vm.$options.methods;
  var i = keys.length;
  while (i--) {
    var key = keys[i];
    if (process.env.NODE_ENV !== 'production') {
      if (methods && hasOwn(methods, key)) {
        warn(
          ("method \"" + key + "\" has already been defined as a data property."),
          vm
        );
      }
    }
    if (props && hasOwn(props, key)) {
      process.env.NODE_ENV !== 'production' && warn(
        "The data property \"" + key + "\" is already declared as a prop. " +
        "Use prop default value instead.",
        vm
      );
    } else if (!isReserved(key)) {
      proxy(vm, "_data", key);
    }
  }
  // observe data
  observe(data, true /* asRootData */);
}

function getData (data, vm) {
  try {
    return data.call(vm)
  } catch (e) {
    handleError(e, vm, "data()");
    return {}

View on GitHub (pinned to 6c5d78ee04)

Solutions

Remove the data entry and rely on the prop, defining a default via the prop's default option
If a local mutable copy is needed, rename it (e.g. localFoo) and initialize from the prop
Use a computed property wrapping the prop instead of duplicating state

Example fix

// before
props: { value: String },
data() { return { value: '' }; }
// after
props: { value: { type: String, default: '' } }

Defensive patterns

Strategy: validation

Validate before calling

function checkDataPropCollisions(options) {
  const props = options.props || [];
  const propNames = Array.isArray(props) ? props : Object.keys(props);
  const dataKeys = Object.keys(typeof options.data === 'function' ? options.data() : (options.data || {}));
  return dataKeys.filter(k => propNames.includes(k));
}

Prevention

Never redeclare a prop name in data
Use prop defaults for initial values
Prefix local mutable copies (localFoo) when deriving from props

When it happens

Trigger: Declaring data() { return { someProp: x } } where someProp is also listed in the props option of the same component.

Common situations: Copying prop values into data to 'make them editable', scaffolding tools generating both, or mixins whose data keys overlap with the host component's props.

Related errors

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