Error when trying to add to my leaflet map it's LayerGroup

I'm experiencing a problem when I try to add to my map the LayerGroup (in order to have Leaflet Control Search, to search by cities). I don't know why it fails, but I suspect that it returns an undefined, or something like that. I'm fairly new to leaflet so I'm not sure if that's the real problem.

I'm using vue-leaflet for the map, so here you have the code.

HTML:

<template>
  <div id="actingMapDiv" class = "vh-100 d-flex justify-content-center align-items-center">

    <div style="height: 900px; width: 90%" class = "map d-flex flex-column justify-content-center align-items-center">
      <h2>Check in our map the situation of requests in your area</h2>
      <div class = "void05"></div>

      <l-map ref="map" 
        v-if="showMap"
        :zoom="zoom"
        :center="center"
        :options="mapOptions"
        style="height: 80%"
        @update:center="centerUpdate"
        @update:zoom="zoomUpdate"

        class = "d-flex flex-column justify-content-center align-items-center"
      >
        <l-tile-layer :url="url" :attribution="attribution" />
      </l-map>
      </div>
    </div>
</template>

The script:

<script>

import { latLng } from "leaflet";
import { LMap, LTileLayer } from "vue2-leaflet";

import L from 'leaflet';

export default {
  name: "Example",
  components: {
    LMap,
    LTileLayer
  },
  data() {
    return {
      zoom: 8,
      center: latLng(42.886027, -7.970126),
      url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
      attribution:
        '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
      mapOptions: {
        zoomSnap: 0.5
      },
      showMap: true
    };
  },


  methods: {
    zoomUpdate(zoom) {
      this.currentZoom = zoom;
    },
    centerUpdate(center) {
      this.currentCenter = center;
    }
  },

  mounted: function() {
    var map = this.$refs.map;

    console.log("My Map", map);
    console.log("L", L);

    var searchLayer = L.layerGroup().addTo(map);
    map.addControl( new L.Control.Search({layer: searchLayer}) );
  }
}
</script>

Console errors:

TypeError: "t is undefined"
    addLayer leaflet-src.js:6665
    addLayer LMap.js:357
    addTo leaflet-src.js:6559
    mounted actingMapPage.vue:74
    VueJS 12

Which redirects here, to this line:

var searchLayer = L.layerGroup().addTo(map);

AFTER FIX:

Added these imports:

import 'leaflet-search';
import "leaflet-search/dist/leaflet-search.src.css";

And used the fix the veryfied answer gave:

mounted: function() {
    var map = this.$refs.map.mapObject;

    var searchLayer = L.layerGroup().addTo(map);
    map.addControl( new L.Control.Search({layer: searchLayer}));
  }