Vue 카카오맵 api사용해서 프로젝ㅌ트 진행중인데요 마커표시하는게어려워요 ㅠㅠ

지도/로컬 API
,
#1
<vue-daum-map 
  :appKey="appKey"

  :center.sync="center"
  :level.sync="level"
  :mapTypeId="mapTypeId"
  :libraries="libraries"

  @load="onLoad"

  @center_changed="onMapEvent('center_changed', $event)"
  @zoom_start="onMapEvent('zoom_start', $event)"
  @zoom_changed="onMapEvent('zoom_changed', $event)"
  @bounds_changed="onMapEvent('bounds_changed', $event)"
  @click="onMapEvent('click', $event)"
  @dblclick="onMapEvent('dblclick', $event)"
  @rightclick="onMapEvent('rightclick', $event)"
  @mousemove="onMapEvent('mousemove', $event)"
  @dragstart="onMapEvent('dragstart', $event)"
  @drag="onMapEvent('drag', $event)"
  @dragend="onMapEvent('dragend', $event)"
  @idle="onMapEvent('idle', $event)"
  @tilesloaded="onMapEvent('tilesloaded', $event)"
  @maptypeid_changed="onMapEvent('maptypeid_changed', $event)"

  style="width:500px;height:400px;">
</vue-daum-map>

<h2>Options</h2>
<table>
  <colgroup>
    <col width="60" />
    <col />
  </colgroup>
  <tr>
    <th>레벨</th>
    <td><input type="range" min="1" max="14" v-model.number="level"> {{level}}</td>
  </tr>
  <tr>
    <th>경도</th>
    <td><input type="number" v-model.number="center.lat" step="0.0001"></td>
  </tr>
  <tr>
    <th>위도</th>
    <td><input type="number" v-model.number="center.lng" step="0.0001"></td>
  </tr>
</table>
#2

먼저 vue-daum-map는 공식적으로 저희가 제공하는 컴포넌트가 아닌 점 참고해주세요,

아래 답변과 같이 마커를 생성할 수 있습니다.

또한,vue-daum-map 컴포넌트를 사용하지 않고
vue에서 JS SDK를 사용하는 방법은 아래 예제 참고해주세요.
https://codesandbox.io/s/nervous-keldysh-87yxg