Vue, SweetAlert, Google autoComplete, error

AddressForm.vue

<template>

    <div>
        <div class="form-group row">
            <label class="col-sm-3 control-label" :class="errors.googleAddress?'has-error':''">
                Geo Information
            </label>
            <div :class="errors.googleAddress?'col-sm-8 help-block':'col-sm-9'">
                <input
                        type="text"
                        class="form-control"
                        id="autocomplete"
                        placeholder="city, state, country"
                />

                <ul class="small help-block">
                    <li v-if="!this.country">
                        Country is missing
                    </li>
                    <li v-if="!this.state">
                        State, province or division is missing
                    </li>
                    <li v-if="!this.city">
                        City is missing
                    </li>
                </ul>



                <span v-if="errors.googleAddress" :class="errors.googleAddress?'help-block':''">
                    <strong>Address field is required for job posting.</strong>
                </span>
                <input type="text" id="google_address_input" name="googleAddress" :value="googleAddress">
                <input type="hidden" id="google_address_input_hidden" name="googleAddress" :value="googleAddress">
                <div v-if="!postAjax">
                    <input type="hidden">
                </div>
            </div>
        </div>

        <div class="form-group row" v-if="googleAddress">
            <label class="col-sm-3 control-label" :class="errors.googleAddress?'has-error':''">
                Street Address
            </label>
            <div :class="errors.googleAddress?'col-sm-9 help-block':'col-sm-9'">
                <input type="text" class="form-control" v-model="street_address"
                       placeholder="House:21, some avenue road">
            </div>
        </div>


        <div class="form-group row mrb-1" v-if="street_address && googleAddress && postAjax">
            <hr>
            <div class="col-md-12">
                <a class="btn btn-sm btn-success pull-right" @click="updateAddress()" id="update_address">Update</a>
            </div>
        </div>

    </div>

</template>

<script>

    export default {
        data() {
            return {
                googleAddress: null,
                street_address: null,
                inputAddress:null,
                city:null,
                state:null,
                country:null
            }
        },
        props: ['errors','postAjax'],

        mounted() {

            if (location.hostname === 'localhost') {
                $('#google_address_input_hidden').remove()
            } else {
                $('#google_address_input').remove()
            }

            let autoComplete = new google.maps.places.Autocomplete(

                (document.getElementById('autocomplete')),
                {types: ['geocode']});

            autoComplete.addListener('place_changed', () => {

                var place = autoComplete.getPlace();

                this.googleAddress = null
                this.qualification = ''
                this.street_address = null
                this.inputAddress = null
                this.city = null
                this.state = null
                this.country = null

                this.getAddress(place)

            });

            $("#autocomplete").keypress(function(e) {
                if (e.which === 13) {
                    return false;
                }
            });

        },

        methods: {

            updateAddress: function () {
                if (!this.country || !this.city || !this.state || !this.street_address) {
                    let frontendErrors = []

                    if (!this.country) {
                        frontendErrors.push('country')
                    }
                    if (!this.state) {
                        frontendErrors.push('state')
                    }
                    if (!this.city) {
                        frontendErrors.push('city')
                    }
                    if (!this.street_address) {
                        frontendErrors.push('street address')
                    }

                    swal({
                        title: 'ERROR !!!',
                        text: frontendErrors.join(', ') + ' missing in your address',
                        type: 'error',
                        showConfirmButton: true
                    })

                    return null
                }

                axios.patch('/address/user', {
                    city: this.city,
                    state: this.state,
                    country: this.country,
                    street_address: this.street_address
                }).then(response => {
                    swal({
                        title: response.data.title,
                        text: response.data.text,
                        type: response.data.type,
                        showConfirmButton: response.data.showConfirmButton,
                        timer: response.data.timer
                    })
                }).catch(error => {
                    this.errors = error.response.data.errors
                    let propertyOfError = []

                    for (let i in this.errors) {
                        propertyOfError.push(i)
                    }
                    let stringifyOfError = propertyOfError.join(', ')

                    swal({
                        title: 'ERROR !!!',
                        type: 'error',
                        html: error.response.data.message + "<br/>" + "The missing fields are: " + stringifyOfError,
                        showConfirmButton: true
                    })
                })
            },

            getAddress(value) {
                this.googleAddress = JSON.stringify(this.processAddress(value))
            },

            processAddress(value) {
                let address_detail = {}
                let street_number = null
                address_detail.formatted_address = value.formatted_address

                for (let i = 0; i < value.address_components.length; i++) {
                    if (value.address_components[i].types[0] == 'country') {
                        address_detail.country = value.address_components[i].long_name
                        this.country=address_detail.country
                    }

                    if (value.address_components[i].types[0] == 'administrative_area_level_1') {
                        address_detail.state = value.address_components[i].long_name
                        this.state=address_detail.state
                    }

                    if (value.address_components[i].types[0] == 'locality') {
                        address_detail.city = value.address_components[i].long_name
                        this.city=address_detail.city
                    }

                    if(value.address_components[i].types[0]=='route'){
                        address_detail.route = value.address_components[i].long_name
                        this.street_address = address_detail.route
                    }

                    if (value.address_components[i].types[0] == 'street_number') {
                        address_detail.street_number = value.address_components[i].long_name
                        street_number = address_detail.street_number
                    }

                }

                if (this.street_address && street_number) {
                    this.street_address = street_number + ', ' + this.street_address
                }

                return address_detail
            }

        }

    }
</script>

<style scoped>
    .help-block {
        color: #ff2e75;
    }
</style>