Создайте повторно используемый компонент Google Maps vue2 с пустым массивом полилиний для заполнения

Question

Мне нужно реализовать компонент карт Google в моем приложении vuejs. Пока мне не понадобилось больше одной полилинии на странице, я не осознавал, что этот компонент не может быть повторно использован. Вот компонент карты Google, который рисует ломаную линии currentActivity:

<template>
  <div>
    <gmap-map
      ref="mapRef"
      :center="center"
      :zoom="12"
      style="width:100%; height: 668px; border-radius: .25rem; border: 1px solid #6fc335; -webkit-box-shadow: 3px 3px 5px 6px rgba(0, 0, 0, 0.4); -moz-box-shadow: 3px 3px 5px 6px rgba(0, 0, 0, 0.4); box-shadow: 3px 3px 5px 6px rgba(0, 0, 0, 0.4);"
    >
      <gmap-marker
        v-for="(item, index) in markers"
        :key="index"
        :position="item"
        :clickable="true"
        :draggable="true"
        @click="(center=center, openInfoWindow(item))"
      />

      <gmap-info-window
        v-if="selectedMarker !== null"
        :position="{ lat: selectedMarker.lat, lng: selectedMarker.lng }"
        :opened="infoBoxOpen"
        @closeclick="infoBoxOpen = false"
      >
        <div class="infoWindow" style="width: 300px; padding: .3rem;">
          <h5 id="infoWindow-marker">{{ content }}</h5>
          <b-button
            variant="warning"
            class="px-2 py-1 float-right"
            @click="closeInfoWindow()"
          >
            Close
          </b-button>
        </div>
      </gmap-info-window>
    </gmap-map>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { getCoord } from '@/utils'
export default {
  name: 'GoogleMap',
  props: [
    'currentActivity',
    'activity'
  ],
  data() {
    return {
      activityId: {
        type: Number,
        default: function() {
          return {}
        }
      },
      center: { lat: 39.216953, lng: 9.112851 },
      coordStart: {},
      coordEnd: {},
      markers: [],
      points: [],
      currentPolyline: '',
      decodedPolyline: {},
      selectedMarker: null,
      infoBoxOpen: false,
      content: ''
    }
  },
  computed: {
    ...mapState([
      'route'
    ])
  },
  async mounted() {
    // set bounds of the map
    const map = await this.$refs.mapRef.$mapPromise
    // const currentActivity = this.$store.getters.currentActivity
    const activity = this.currentActivity.activity
    const points = this.getCoords(activity).map(point => {
      return {
        lat: point.latitude,
        lng: point.longitude
      }
    })
    console.log('points for bounds: ', points)
    const start = points[0]
    console.log('start how it is: ', start)
    const end = points[1]
    console.log('end how it is: ', end)
    const sw = (start.lat < end.lat && start.lng < end.lng) ? start : end
    const ne = (sw === start) ? end : start
    // eslint-disable-next-line no-undef
    const bounds = new google.maps.LatLngBounds(sw, ne)
    console.log('bounds:', bounds)
    map.fitBounds(bounds)
    const activityId = activity.id

    await this.$store.dispatch('activity/setCurrentPolyline', activityId)
    const polyline = require('@mapbox/polyline')
    const currentPolyline = this.$store.getters.currentPolyline
    const decodedPolyline = polyline.decode(currentPolyline).map(point => {
      return {
        lat: point[0],
        lng: point[1]
      }
    })
    const coords = this.getCoords(activity)
    this.markers =
    coords.map(coord => ({
      lat: parseFloat(coord.latitude),
      lng: parseFloat(coord.longitude)
    }))
    this.$gmapApiPromiseLazy().then(() => {
      this.points = decodedPolyline
      this.polylineOptions = {
        path: this.points
      }
      // eslint-disable-next-line no-undef
      this.polylineObj = new google.maps.Polyline(this.polylineOptions)
      this.$refs.mapRef.$mapPromise.then(map => {
        this.polylineObj.setMap(map)
      })
    })
  },
  methods: {
    getCoords(activity) {
      console.log('activityHEREREEEE: ', activity)
      const { starting_point, arrival_point } = activity
      const coordStart = getCoord(starting_point)
      const coordEnd = getCoord(arrival_point)
      return [coordStart, coordEnd]
    },
    openInfoWindow(marker) {
      const currentActivity = this.$store.getters.currentActivity
      const activity = currentActivity.activity
      this.selectedMarker = marker
      this.infoBoxOpen = true
      const points = this.getCoords(activity)
      const start = points[0]
      const end = points[1]
      const startString = 'Punto di partenza'
      const endString = 'Punto di arrivo'
      if ((marker.lat === start.latitude) && (marker.lng === start.longitude)) {
        this.content = startString
      }
      if ((marker.lat === end.latitude) && (marker.lng === end.longitude)) {
        this.content = endString
      }
    },
    closeInfoWindow() {
      this.infoBoxOpen = false
    }
  }
}
</script>
<style lang="scss" scoped>

</style>

И вот как я могу использовать его:

<b-col>
 <google-map :currentActivity="currentActivity" />
</b-col>

Теперь проблема в том, что мне нужно разобратьсяс 3 различными полилиниями (одна текущая активность, другая задействованная активность и другая, которая показывает «пропущенную»). Точки этого последнего являются конечной точкой текущего действия и отправной точкой второго. Мне нужно переосмыслить весь компонент карты Google. Я не должен рисовать текущую полилинию здесь, вместо этого объявлять пустой массив, который будет заполняться по-разному, когда я его использую: если я вызову его на странице, он будет иметь только текущую полилинию активности, если я вызову его на другой странице, он будетпоказать 3 полилинии все вместе (с разными цветами). Надеюсь, я был достаточно ясен. Я очень запутался в том, как начать. Спасибо всем, кто хочет помочь. х