StationList.vue

<template>
  <div>
    <p class="menu-label">Latest Callsigns</p>
    <input class="input" type="text" placeholder="Filter stations..." v-model="stationFilter">
    <div class="station-list">
      <button
        v-for="callsign in stations"
        :key="callsign"
        @click="focusMarker(callsign)"
        class="button is-small station-list-item"
      >{{callsign}}</button>
    </div>
  </div>
</template>

<style scoped>
.station-list {
  display: flex;
  flex-direction: column;
  margin: 0.5em;
}

.station-list-item {
  margin: 0.25em;
}
</style>

<script>
export default {
  props: ["focusMarker"],
  data: () => ({
    stationFilter: ""
  }),
  computed: {
    stations() {
      // const filter =  : "";
      console.log(this.stationFilter.toUpperCase());
      return this.$store.getters.stationCallsigns.filter(s =>
        s.toUpperCase().includes(this.stationFilter.toUpperCase())
      );
    }
  }
};
</script>