vue.js - VueJS this.$set is not a function inside google maps event listener

Question

I'd like to update my data values in real time when using Google Map Places autocomplete service.

I am struggling accessing this inside the google.maps.event.addListener as follows:

export default {
    data : function() {
        return {
            name : '',
            lat : 0,
            long : 0,
        }
    },
    mounted : function() {
        var input = this.$refs.searchTextField;
        var autocomplete = new google.maps.places.Autocomplete(input);

        google.maps.event.addListener(autocomplete, 'place_changed', function() {
            let place = autocomplete.getPlace();
            this.$set(this, 'name', place.name);
            this.$set(this, 'lat', place.geometry.location.lat());
            this.$set(this, 'long', place.geometry.location.lng());
        });
    },
}

Uncaught TypeError: this.$set is not a function

EDIT: found a beginning of an answer by transforming the function into an arrow function to get the Vue instance as follows:

google.maps.event.addListener(autocomplete, 'place_changed', (event) => {
    let place = autocomplete.getPlace();
    this.$set(this, 'name', place.name);
    this.$set(this, 'lat', place.geometry.location.lat());
    this.$set(this, 'long', place.geometry.location.lng());
});

But now it works only once.. when I would like reactivity every time I select a new city..

Answer 1

等待大神答复