Vue 3 디렉티브 관련 (CustomOverlay event)

카카오맵 API (지도/로컬)
1 
const customOverlay = new kakao.maps.CustomOverlay({
            position: new kakao.maps.LatLng(obj.y, obj.x),
            content: `<button
                      class="rounded p-2 btn btn-primary"
                      style="
                        font-weight: bold;
                        color: white;
                        background-color: #88abda;
                        opacity: 0.8;
                        z-index: 10;
                      "
                      v-if="showFullScreen"
                      @click="clickOverlay('${obj.sido_name}')"
                    >
                    ${obj.sido_name}
                    </button>`
          })

this.markers.push(customOverlay)

customOverlay.setMap(this.map)

오버레이 content에 v-if랑 @click 등 Vue 3에서 사용하는 디렉티브 속성을 넣었는데, 지도에서 전혀 작동하지 않습니다. 유독 Vue 3에서 카카오맵 api와 관련된 오류가 많은 것 같은데, 혹시 해결 방법이 있을까요?

2

아래 답변과 문서 참고해서 content는 문자열 또는 HTMLElement로 적용해주세요.
https://devtalk.kakao.com/t/topic/105513/5