Best way to add dot on image when clicked in Vue.js?

Question

I have an <img> tag with a @click event. When I click on the picture, I want to add a dot under the actual position of the mouse.

Im looking for something like this:

  $(document).ready(function () {
      $(document).click(function (ev) {
          mouseX = ev.pageX;
          mouseY = ev.pageY
          console.log(mouseX + ' ' + mouseY);
          var color = '#000000';
          var size = '1px';
          $("body").append(
          $('<div></div>')
              .css('position', 'absolute')
              .css('top', mouseY + 'px')
              .css('left', mouseX + 'px')
              .css('width', size)
              .css('height', size)
              .css('background-color', color));
      });
  });

Answer 1

You can do this in Vanilla JavaScript as follows:

new Vue({
     el: "#app",
     methods:{
          drawDot(){
               mouseX = event.pageX;
               mouseY = event.pageY
               console.log(mouseX + ' ' + mouseY);
               var color = '#000000';
               var size = '1px';
               var div = document.createElement("div");  
               div.style.position='absolute';
               div.style.top=mouseY + 'px';
               div.style.left=mouseX + 'px';
               div.style.width=size;
               div.style.height=size;
               div.style.backgroundColor=color;
               document.body.appendChild(div)
          }
     }
});

.draw{
    background: white;
    width: 50vw;
    height: 50vw;
    border-style: solid;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
     <div class="draw" @click="drawDot"></div>
</div>