¿Por qué la propiedad data de un componente de Vue debe ser una función?

Si no te familiarizas con las reglas básicas de un framework (lenguaje de programación, herramienta, etc.) cuando empiezas a usarlo, las cosas no van a funcionar como esperas, ya que no fue concebido de esa manera.

Cuando usé Vue por primera vez, hice esto por error:

data: {
  message: 'Some Message'
}

entonces, me salió el siguiente mensaje de advertencia:

[Vue warn]: The “data” option should be a function that returns a per-instance value in component definitions.

Lo que deberías hacer en su lugar es:

data: function() {
  return {
    message: 'Some Message'
  };
}

Entonces, la razón por la que Vue obliga a que la propiedad data sea una función es que cada instancia de un componente debe tener su propio objeto de datos. Si no lo hacemos, todas las instancias van a compartir el mismo objeto y cada vez que cambiemos algo, se va a reflejar en todas las instancias.

Mira lo que dice la documentación de Vue al respecto y un ejemplo rápido en vivo.

Espero que te sirva.