[Vuejs]-Understanding 2-way data binding and scope using Leaflet with Vue

I was able to solve this issue with an @change and I think I have a better understanding of when to use computed in Vue.

First, I moved a lot of the update logic out of computed:

computed: {
  displayedStories() {
    return this.selectedMonth
      ? dateFilter(this.selectedMonth, this.allStories)
      : this.allStories
  },
},

so that it’s just returning an array. Then I added a listener to the select:

<select v-model="selectedMonth" @change="updateStories()">

and then created a new method for handling that change:

methods {
  updateStories() {
    const markers = displayedStories.map(story => L.marker(story.coords)
      .bindPopup(mapLink(story)))
    const storyMarkers = L.layerGroup(markers)
    this.markers = storyMarkers
    this.leafleftMap.addLayer(storyMarkers)
    this.changedMonth = this.selectedMonth
  },
},