Calling vue v-model from inside jquery code

I have this jquery code that i run when the mounted hook runs

  mounted() {
    this.$progress.finish();
    
    var geocoder = new google.maps.Geocoder();
var marker = null;
var map = null;
function initialize() {
      var $latitude = document.getElementById('latitude');
      var $longitude = document.getElementById('longitude');
      var latitude = -1.286389;
      var longitude = 36.817223;
      var zoom = 16;

      var LatLng = new google.maps.LatLng(latitude, longitude);

      var mapOptions = {
        zoom: zoom,
        center: LatLng,
        panControl: false,
        zoomControl: true,
        scaleControl: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }

      map = new google.maps.Map(document.getElementById('map'), mapOptions);
      if (marker && marker.getMap) marker.setMap(map);
      marker = new google.maps.Marker({
        position: LatLng,
        map: map,
        title: 'Drag Me!',
        draggable: true
      });

      google.maps.event.addListener(marker, 'dragend', function(marker) {
        var latLng = marker.latLng;
        $latitude.value = latLng.lat();
        $longitude.value = latLng.lng();
        this.property_coordinates = 'hello world';
      });


    }
    initialize();
    $('#findbutton').click(function (e) {
        var address = $("#Postcode").val();
        geocoder.geocode({ 'address': address }, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                map.setCenter(results[0].geometry.location);
                marker.setPosition(results[0].geometry.location);
                $(latitude).val(marker.getPosition().lat());
                $(longitude).val(marker.getPosition().lng());
            } else {
                alert("Geocode was not successful for the following reason: " + status);
            }
        });
        e.preventDefault();
    });
    
    
  },

I want to grab the coordinates when the marker is dragged and this should updat ethe v-model variable property_coordinates

google.maps.event.addListener(marker, 'dragend', function(marker) {
            var latLng = marker.latLng;
            $latitude.value = latLng.lat();
            $longitude.value = latLng.lng();
            this.property_coordinates = 'hello world';
          });

This this.property_coordinates = 'hello world'; does not update the v-model. How can i update the v-model from within jquery code?

Answer

this in the event function is not bound to the vue component.

An arrow function will maintain this from he outer scope

google.maps.event.addListener(marker, 'dragend', (marker) => {
            var latLng = marker.latLng;
            $latitude.value = latLng.lat();
            $longitude.value = latLng.lng();
            this.property_coordinates = 'hello world';
          });

Otherwise you can create a reference to the outer vue this

const component = this
google.maps.event.addListener(marker, 'dragend', function (marker) {
  component.property_coordinates = 'hello world';
});