v-on:click="" 질문입니다

강의는 Vue3 Composition API 장의 첫번째 수업 Composition API입니다

data 옵션 함수로 message를 만들면

<button @click="message+='!'">{{ this.message }}</button>

--> 정상적으로 '!'가 뒤에 추가되고 렌더링이 됨

setup 함수 내에서 반응형을 안 만들어주면

<h2>일반 메시지</h2>

<p>{{ normalMessage }}</p>

button v-on:click="normalMessage +='!'">Add Message</button>

normalMessage의 뒤에 !가 붙긴 하는데 재랜더링이 안되서 업데이트된 값으로 안 보임... reactiveMessage변경 버튼 눌러주면 !가 추가된 값으로 보여짐

질문) data Options API로 만든 message는 정상적으로 뒤에 !가 찍히고 변환된 값이 화면에 나오는데 왜 setup() 으로 만든 normalMessage는 변환된 값으로 안 뜨나요?