Внутри Vue data вызывается как функция. Т.е. в момент когда vue готово обратиться к параметрам data там происходит такой вызов:
data()
Соответственно прямое обращение к data объявленному как объект (
data: {} ) вызовет ошибку
Uncaught TypeError: data is not a function.
Теперь о втором варианте.
data: () => {} - такое объявление подразумевает, что внутри блока
{} будут какие условия.
А после вызова функции
data() vue ожидает в результате получить объект.
При использовании стрелочной функции нам остается использовать два варианта по сути:
Краткая запись:
data: () => ({ param: 1 }) //Возвращает объект
Расширенная запись:
data: () => {
return {
param: 1
}
}
Если осталось много неясных моментов то можете попробовать прочитать
вот эту статью