[Vue] Property or method * is not defined on the instance but referenced during render.

속성을 정의하지 않았는데 화면에 렌더링되려고 할 때 아래와 같은 에러가 나타난다.

Property or method * is not defined on the instance but referenced during render.

 

이 에러는 보통 정의하지 않은 경우나 오타 등 다양한 원인으로 나타나게 되는데,

나는 아래 "items"에서 에러가 났었다. 

<template>
	<testComponent :items="items" />
</template>

<script>
import { reactive } from '@vue/composition-api'

export default {
	setup(props) {
    	const state = reactive({
        	items: null
        }),
        return {
        	state
        }
    }
}
<script>

 

이 경우에 리턴문을 아래와 같이 변경하든지,

return {
	...toRefs(state)
}

template 코드에서 state를 추가하면 된다. 

<template>
	<testComponent :items="state.items" />
</template>

 

console로 확인해보니

reactive는 반응형 객체라서 Observer 객체로 되어있지만

toRefs(state)를 하게 되면 일반 객체가 되어 전개연산자를 통해 state 변수 없이 state명만으로도 template에 호출할 수 있다.