I'm creating a leaflet world map, and need to show a modal to user, according to what country the user clicks on. I'm creating the modal as a component, and using it in the index.vue. the codes in index.vue are:

<template>
  <div id="map-wrap" style="height: 100vh">

    <client-only>
      <l-map :zoom=13 :center="[55.9464418,8.1277591]" :options="options" ref="map">

        <l-tile-layer url="..."></l-tile-layer>
        <l-geo-json :geojson="geojson" :options="geoJSON_options"></l-geo-json>
        <Detail_modal />

      </l-map>
    </client-only>
</div>
</template>

<script>
import axios from "axios";
import Detail_modal from '~/components/detail_modal.vue';

export default {
  name: 'IndexPage',

  components:{
    Detail_modal
  },

  data: function(){
    return {
      options: {
        noWrap: true,
        maxBounds: [
          [-90, -180],
          [90, 180]
        ],
        minZoom: 3,
        maxZoom: 5,
      },

      geojson: null
    }
  },

  methods:{
    get_data(){
      ... 
    },

  },

  computed:{
    geoJSON_options(){
      return {
        style(feature){
          ...
      },

        onEachFeature(feature, layer){
          ...
        }
      }
    }
  },

  mounted(){
    this.get_data();

    setTimeout(() => {
      let map = this.$refs.map.mapObject;
      map.createPane("detail-modal");
      map.getPane("detail-modal").style.zIndex = 1000;
    })
  }
}
</script>

<style lang="scss" scoped>

</style>

and the component codes are:

<template>
    <div id="detail-modal">
        
    </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
div#detail-modal{
    position: absolute;
    width: 300px;
    height: 400px;
    background-color: white;

    z-index: 99;
    left: 500px;
    top: 20px;
}
</style>

As we see, we can expect a white rectangle to be shown above the map.

The problem is that the component (white rectangle) is always under the map, even when we are using z-index.

I've searched a lot about it, some people say that we should use map panes and map.createPane() in these situations, which turns the element into a leaflet layer and controls the order between different parts of the map, but the problem gets worse when there is no guide about how we are supposed to turn custom elements such as html element with a ID into this such layers.

Well, as always, any help is appreciated! :)