Google map api. search nearby not getting respond back seem link axios getting skip

Hello guys I am working on google map api to search all the gym near by me using Vue Js and laravel. The problem is I am not getting an error back and also not getting an respond back here is my code.

 <template>
  <div class="container mb-5">
    <div class="row justify-content-center">
      <div class="col-md-12 text-center">
        <h1 class="">Find</h1>
      </div>
      <div class="row mt-5">
        <form>
          <div class="form-group">
            <label>Email address</label>
            <input
              type="text"
              class="form-control"
              placeholder="Address"
              v-model="coordinates"
            />
            <a @click="locatorButtonPressed"> get location</a>
          </div>
          <select class="form-control" v-model="type">
            <option value="gym">gym</option>
          </select>
          <select
            class="form-control"
            v-model="radius"
            aria-placeholder="Distance"
          >
            <option value="10">10 KM</option>
            <option value="50">50 KM</option>
            <option value="100">100 KM</option>
            <option value="200">200 KM</option>
          </select>
          <button class="ui button" @click="findCloseBuyButtonPressed()">
            Find Gym
          </button>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "App",
  data() {
    return {
      lat: 0,
      lng: 0,
      type: "",
      radius: "",
      places: [],
    };
  },
  computed: {
    coordinates() {
      return `${this.lat}, ${this.lng}`;
    },
  },
  methods: {
    locatorButtonPressed() {
      navigator.geolocation.getCurrentPosition(
        (position) => {
          this.lat = position.coords.latitude;
          this.lng = position.coords.longitude;
        },
        (error) => {
          console.log("Error getting location");
        }
      );
    },
    findCloseBuyButtonPressed() {
 

      var axios = require('axios');

      var config = {
        method: 'get',
        url:  `https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=${
                this.lat
              },${this.lng}&type=${this.type}&radius=${
                this.radius * 1000
              }&key={my-api-key}`,
        headers: { }
      };
      alert(config.url)
      axios(config)
      .then(function (response) {
        console.log(JSON.stringify(response.data ));
      })
      .catch(function (error) {
        console.log(error);
      });
      alert("hello")
    },
  }
};
</script>

<style>
</style>

I have try to debug this code by putting alert() it pop us both but it seems that it skipped this part because there is not respond or error in console

 axios(config)
  .then(function (response) {
    console.log(JSON.stringify(response.data ));
  })
  .catch(function (error) {
    console.log(error);
  });

So I try changed alert to console.log() this time it just refresh a page and return noting in a console.

I have try my google map api key with example from document on website it still work fine.