event هندلینگ در vue js

سلام دوستان من کد زیر رو توی یک کامپوننت ویو نوشتم و میخام وقتی روی addBtn کلیک شد یه مدال باز بشه یا نمیدونم یه پیغام اصلا چاپ بشه. مشکل اینه که من addBtn رو توی جاوااسکریپت به صورت داینامیک تولید کردم و حالا وقتی روش کلیک میشه تابعش رو نمیشناسه

<template>
  <div style="width: 100%;height: 100%;">
    <div id="homemap" style="width: 100%;height: 100%;"></div>
  </div>
</template>

<script>
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition((location) => {

      var map = L.map('homemap').setView([location.coords.latitude, location.coords.longitude], 13);

      var marker = L.marker([location.coords.latitude, location.coords.longitude], {draggable: 'true'})

        .bindPopup('<a href="#" v-on:click="uploadForm" class="addBtn">اینجا کجاست ؟ </a>')

    });
  } else {

  }

  export default {
    name: 'home-map',
    data() {
      return {
        test: 1
      }
    },
    methods: {
      uploadForm() {
        console.log(1111);
      }
    }
  }

  $(function () {

    $('#homemap').on('click', '.addBtn', function (event) {
      console.log(11111111);
    });

  });
</script>