title: Vue.js + Vue2Leaflet: update computed property on map moveend
body: <p>I'm using vuejs with Vue2Leaflet. In my store I keep the map reference and I registered a getter for retrieving all markers in viewport:</p>
  
  <pre><code>getters: {
    ...,
    viewportMarkers: state =&gt; {
      return state.markers.filter(marker =&gt; state.map.getBounds().contains(latLng(marker.latlng)))
    },
    ...
  },
  </code></pre>
  
  <p>In my component I use a computed property:</p>
  
  <pre><code>computed: {
    ...,
    viewportMarkers() {
      return this.$store.getters.viewportMarkers
    },
    ...
  }
  </code></pre>
  
  <p>Then I use that getter like this:</p>
  
  <pre><code>&lt;v-marker-cluster ref="clusterRef" :options="clusterOptions"&gt;
    &lt;l-marker
      v-for="(marker, i) in viewportMarkers"
      :key="marker.id"
      :data-id="marker.id"
      :lat-lng.sync="marker.location.latlng"
      :icon.sync="marker.icon"
      :draggable="marker.draggable"
      ref="markerRef"
    &gt;
      &lt;l-popup v-if="marker.popup" :content="marker.popup" /&gt;
    &lt;/l-marker&gt;
  &lt;/v-marker-cluster&gt;
  </code></pre>
  
  <p>When the map is zoomed or a marker is dragged, the output of <code>{{viewportMarkers}}</code> in the component's template updates accordingly, but it doesn't when the map is moved. I'm not sure how to recompute the value on moveend event. If someone knows how todo, please help.</p>
  
  <p>Btw. I also tried to sync the bounds in my map, but that didn't help:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;l-map ref="map"
    :zoom.sync="zoom"
    :options="mapOptions"
    :center="center"
    :bounds.sync="bounds"
    :min-zoom="minZoom"
    :max-zoom="maxZoom"
  &gt;
  </code></pre>
  
  <p>My current workaround is to reassign the value of <code>state.markers</code> with the same value.. not very smart, but it keeps the reactivity on map move. </p>