How to check if markers are inside bounds of the map?

Hello, i am trying to check if markers are inside bounds of the map. I have been able to get in console bounds from map. But i am not sure how to connect those bounds and marker position. I tried with simple if statement but i could not make it work.

Any help please.

<template>
  <div class="container">
    <gmap-map id="map"
        :center="{lat:currentLocation.lat, lng:currentLocation.lng}"
        :zoom="14"
        ref="map"
        @bounds_changed="filterMarkers()"
    >
    <div>
      <gmap-marker
        v-for="(marker,key) in receivedData"
        :key="key"
        :position="marker.location"
        :clickable="true"
        @click="getMarkers(marker)"
      >
      </gmap-marker>
    </div>  
    </gmap-map> 
  </div> 
</template>

<script>
import axios from 'axios'

export default {
  name: 'App',
  data() {
    return {
      map: null,
      currentLocation : { lat : 53.701011, lng : 11.990084},
      receivedData: '',
    }
  },
  created() {
    axios.get('URL')
            .then((response) => this.receivedData = response.data)
            .catch((error) => console.error(error)); 
  },    
  methods: {
    filterMarkers(){
      const mapBounds = this.$refs.map.$mapObject.getBounds();
      console.log(mapBounds.Hb.g, mapBounds.tc.g)
    },
  }
}
</script>

<style scoped>
#map {
  width: 500px;
    height: 500px;
  }
</style>