openlayer map change marker position onClick in vuejs

Question

I am using openlayer map in vue3 and I am trying to showing marker on click to map.
My problem is: I cant delete prev marker before adding new marker...
I am using this documantaion.
Here is my code:

<template>
  <ol-map :loadTilesWhileAnimating="true" :loadTilesWhileInteracting="true" style="height:400px">
    <ol-view ref="view" :center="center" :rotation="rotation" :zoom="zoom" :projection="projection"/>
    <ol-tile-layer>
      <ol-source-osm/>
    </ol-tile-layer>
    <ol-vector-layer>
      <ol-source-vector>
        <ol-interaction-draw :type="drawType">
        </ol-interaction-draw>
      </ol-source-vector>
      <ol-style>
        <ol-style-icon :src="markerIcon" :scale="2"></ol-style-icon>
      </ol-style>
    </ol-vector-layer>
  </ol-map>
</template>

<script>
import markerIcon from "../../assets/img/locationSingle.svg"
import {ref} from "vue";

export default {
  name: "test",
  setup() {
    const center = ref([54.1966794, 31.8797732])
    const projection = ref('EPSG:4326')
    const zoom = ref(6)
    const rotation = ref(0)

    const markers = ref(null);
    const drawType = ref("Point")

    return {
      center,
      projection,
      zoom,
      rotation,
      markerIcon,
      markers,
      drawType
    }
  },
}
</script>

These two links can help you.
Context-menu and adding marker (with some events)
Showing vector

Answer 1

Use following function on drawstart:

const drawstart = (event) => {
  vectors.value.source.removeFeature(drawedMarker.value);
  drawedMarker.value = event.feature;
  console.log(vectors.value.source)
}

Full code:

<template>
  <ol-map :loadTilesWhileAnimating="true" :loadTilesWhileInteracting="true" style="height:400px">
    <ol-view ref="view" :center="center" :rotation="rotation" :zoom="zoom" :projection="projection"/>

    <ol-tile-layer>
      <ol-source-osm/>
    </ol-tile-layer>

    <ol-vector-layer>
      <ol-source-vector ref="vectors">
        <ol-interaction-draw @drawstart="drawstart" :type="drawType">
        </ol-interaction-draw>
      </ol-source-vector>

      <ol-style>
        <ol-style-icon :src="markerIcon" :scale="2"></ol-style-icon>
      </ol-style>
    </ol-vector-layer>

  </ol-map></template>

<script>
import markerIcon from "../../assets/img/locationSingle.svg"
import {ref} from "vue";

export default {
  name: "test",
  setup() {
    const center = ref([54.1966794, 31.8797732])
    const projection = ref('EPSG:4326')
    const zoom = ref(6)
    const rotation = ref(0)

    const markers = ref(null);
    const drawType = ref("Point")

    const drawedMarker = ref()
    const vectors = ref(null);

    const drawstart = (event) => {
      vectors.value.source.removeFeature(drawedMarker.value);
      drawedMarker.value = event.feature;
      console.log(vectors.value.source)
    }

    return {
      vectors,
      drawstart,
      center,
      projection,
      zoom,
      rotation,
      markerIcon,
      markers,
      drawType
    }
  },
}
</script>