Vue.js 컴포넌트에서 Geocoder 사용시 Cannet read property 'Geocoder' of undefined

mounted
const script = document.createElement(‘script’)
script.src = http://dapi.kakao.com/v2/maps/sdk.js?appkey=${process.env.VUE_APP_KAKAO_API_KEY}&libraries=services
document.head.appendChild(script)

method
getCurrentAddress(arr) {
var geocoder = new kakao.maps.services.Geocoder();
console.log(geocoder)
function searchDetailAddrFromCoords(lon, lat, callback) {
geocoder.coord2Address(lon, lat, callback);
}
searchDetailAddrFromCoords(arr[1], arr[0], this.getUrl)
}

다음과 같은 형식으로 컴포넌트가 mount될때 head에 src로 카카오를 추가한 뒤 메서드를 실행하면 입력받은 위도, 경도에서 주소를 뽑아내주고 있습니다. new kakao까지는 잘 실행되어 객체는 만들어지려고 하는 것 같은데 저기서 undifiend가 나오는 바람에 진행을 못하고 있습니다.

금요일 밤까지 잘 되는 것을 확인했는데 갑자기 제목과 같은 에러메세지가 떠서 질문드립니다.

지도 스크립트가 모두 로드될 때 호출되도록 아래 링크 참고하여 수정해주세요.



http://apis.map.kakao.com/web/documentation/#load_load