title: when user get zoomed in some area on map, display specific data from different function
body: <p>when user get close to some area on map, display specific data from one other function? I am calculating average of each area estate prices in computed functions. it's below. you can see the average function on <a href="https://jsfiddle.net/sw2r89q4/1/" rel="nofollow noreferrer">jsfiddle</a>...</p>
  
  <p>Already displaying averages but, what I need to do here, when user get zoomed in that region/city then display that areas average... The original code with map down below...</p>
  
  <p>For example, how to sets bounds and connect those bounds to average function??? Thank you for helping.!</p>
  
  <h2>code updated!</h2>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>data() {
          return {
              avg:"",
              map: {},
              mapName: "map",
              estates: [],
      },
      mounted() {
          axios.get('/ajax').then((response) =&gt; {
              this.estates =  response.data
          });
  
          this.initMap();
  
      },
      methods: {
  
         initMap: function(){
              var mapOptions =
                  {
                      zoom : 6,
                      center : {
                          lat:34.652500,
                          lng:135.506302
                      }
                  };
  
              this.map = new google.maps.Map(document.getElementById(this.mapName), mapOptions);
  
              google.maps.event.addListener(this.map, 'bounds_changed', function() {
                  console.log("bound changed alert");
              });
          },
  
  
          avgArray: function (region) {
               const sum = arr =&gt; arr.reduce((a,c) =&gt; (a += c),0);
               const avg = arr =&gt; sum(arr) / arr.length;
  
               return avg(region);
          },
  
  
      },
      computed: {
   
          groupedPricesByRegion () {
           return this.estates.reduce((acc, obj) =&gt; {
              var key = obj.region;
  
              if (!acc[key]) {
                acc[key] = [];
              }
  
                  acc[key].push(obj.m2_price);
  
                  return acc;
              }, {});
          },
  
          averagesByRegion () {
           let arr = [];
              Object.entries(this.groupedPricesByRegion)
                  .forEach(([key, value]) =&gt; {
                      arr.push({ [key]: Math.round(this.avgArray(value)) });
              });
  
              return arr;
          },
      },</code></pre>
  </div>
  </div>
  </p>