data functions should return an object: https://vuejs.org/v2

Error message

data functions should return an object:
https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function

What it means

Vue's data option must either be a function returning a plain object, or omitted. If the resolved data is not a plain object (e.g. the function returned undefined, or data was declared as an object/array), Vue discards it, initializes an empty data object, and emits this warning in development.

Source

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

    // during Vue.extend(). We only need to proxy props defined at
    // instantiation here.
    if (!(key in vm)) {
      proxy(vm, "_props", key);
    }
  };

  for (var key in propsOptions) loop( key );
  observerState.shouldConvert = true;
}

function initData (vm) {
  var data = vm.$options.data;
  data = vm._data = typeof data === 'function'
    ? getData(data, vm)
    : data || {};
  if (!isPlainObject(data)) {
    data = {};
    process.env.NODE_ENV !== 'production' && warn(
      'data functions should return an object:\n' +
      'https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function',
      vm
    );
  }
  // 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
        );

View on GitHub (pinned to 6c5d78ee04)

Solutions

Make data a function and return a plain object literal
Check every return path of the data function returns an object
If data was declared as an object, wrap it: data() { return {...}; }
Await async work in created() instead of returning a Promise from data()

Example fix

// before
data() {
  fetchItems();
}
// after
data() {
  return { items: [], loading: false };
}

Defensive patterns

Strategy: validation

Validate before calling

function validateDataOption(options) {
  const d = typeof options.data === 'function' ? options.data() : options.data;
  if (d !== null && d !== undefined && (typeof d !== 'object' || Array.isArray(d))) {
    throw new TypeError('data must resolve to a plain object');
  }
}

Type guard

function isPlainObject(v) {
  return Object.prototype.toString.call(v) === '[object Object]';
}

Prevention

Always declare data as a function returning an object literal
Check every return path of data()
Never return Promises/arrays/null from data()

When it happens

Trigger: Declaring data as a non-function in a non-root component and returning a non-object from the data() function — e.g. data() { return; }, data: () => null, or data: [1,2,3].

Common situations: Arrow functions returning nothing due to implicit return, forgetting the return statement, copying root-component style data:{} into a reusable component, or a data() function that returns a Promise instead of an object.

Related errors

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