[VueJS] The "data" option should be a function that returns a per-instance value in component definitions error

자주 보는 에러는 아니지만 한번 겪은김에 기록해둔다.

 

The "data" option should be a function that returns a per-instance value in component definitions

에러 내용을 살펴보면 대략 살펴보면 "데이터" 옵션을 함수로 선언하고 return을 통해 각 변수들을 반환하라는 의미로 보이는데 에러 뒷부분에 명시된것처럼 이 에러는 Vue.component 에서 발생하는 에러이다.

 

Vue에서 data 옵션을 선언하는 방법과 Vue.component에서 data 옵션을 선언하는 방식에 차이가 존재하는데

즉, Vue.component에서 data 옵션을 잘못 선언했을때 발생하는 에러라는 의미이다.

---

▷ 에러가 발생한 코드

Vue.component('mine-it', {
	data : { 
		test : 'hi'
	},
	methods: {} 
  } 
});

 

▷ 정상 코드

Vue.component('mine-it', {
	data() { 
		return { 
			test : 'hi'
		} 
	},
	methods: {} 
  } 
});