Updating map view/marker with props

[fbnlsr]

I'm trying to update a map that's inside a component using props. Here's the component:

<template>
  <l-map ref="myMap" style="height: 635px" :zoom="zoom" :center="coords" :options="coords">
    <l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
    <l-marker :lat-lng="coords"></l-marker>
  </l-map>
</template>

<script lang="ts">
  import { defineComponent } from 'vue'
  import 'leaflet/dist/leaflet.css'
  import { LMap, LTileLayer, LMarker } from '@vue-leaflet/vue-leaflet'

  export default defineComponent({
    name: 'LeafletMap',
    components: {
      LMap,
      LTileLayer,
      LMarker,
    },
    props: {
      coords: {
        type: Array,
        required: true,
      },
    },
    data() {
      return {
        url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
        attribution: '&copy; <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors',
        zoom: 15,
        options: { zoomControl: false, maxZoom: 14 },
      }
    },
  })
</script>

The component displays fine, but whenever I update the coords prop (using vue-router), I get an error saying Error: Attempted to load an infinite number of tiles

How could I update the map with the new set of coordinates without having this error thrown?