leaflet-draw in VUE3 throws error as wrong leaflet version

Question

I am creating a page in VUE3 where I am including leaflet and leaflet-draw libraries. I am using leaflet version "^1.7.1" and leaflet-draw version "^1.0.4" which are latest as of now. The map is getting created without any issue.

Although I am using the latest versions, when I try to execute the line new L.Control.Draw() it throws and error "Uncaught Error: Leaflet.draw 0.2.3+ requires Leaflet 0.7.0+."

Dependencies in my package.json file.

  "dependencies": {
    "core-js": "^3.6.5",
    "leaflet": "^1.7.1",
    "leaflet-css": "^0.1.0",
    "leaflet-draw": "^1.0.4",
    "vue": "^3.0.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0"
  },

Below is my vue file.

<template>
    <div class="h-full flex-1" id="main-map"></div>
</template>

<script>

require('leaflet')
const L = window.L
require('leaflet-draw')
import { onMounted } from '@vue/runtime-core'
import DRAW_OPTIONS from './data/drawingOptions'


export default {
    setup() {
        onMounted(() => {
            let mymap = L.map('main-map').setView([51.505, -0.09], 10);
            L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
                attribution: 'attribution-here',
                maxZoom: 18,
                id: 'mapbox/streets-v11',
                tileSize: 512,
                zoomOffset: -1,
                accessToken: 'access-token-here'
            }).addTo(mymap);

            console.log(L.version) // this prints in console "1.7.1"
            var drawControl = new L.Control.Draw(DRAW_OPTIONS)
            console.log(L.version) // this prints in console "1.7.1"
            mymap.addControl(drawControl);              
        })

        return {
        }
    }
}
</script>

Also I tried importing the L form 'leaflet' like 'import L from "leaflet";' Nothing seems to change. And I completely deleted my node_modules directory and re installed the all dependencies, it didn't help as well.

As an another debugging step, I opened the file node-modules/leaflet-draw/dist/leaflet.draw.js and searched the location where the version comparison is there, and added a console.debug(L.version), for my surprise, it prints 0.6.4.

initialize: function(t) {
                console.log(L.version); // this prints in console "0.6.4"
                if (L.version < "0.7") throw new Error("Leaflet.draw 0.2.3+ requires Leaflet 0.7.0+. Download latest from https://github.com/Leaflet/Leaflet/");
                L.Control.prototype.initialize.call(this, t);
                var e;
                this._toolbars = {}, L.DrawToolbar && this.options.draw && (e = new L.DrawToolbar(this.options.draw), this._toolbars[L.DrawToolbar.TYPE] = e, this._toolbars[L.DrawToolbar.TYPE].on("enable", this._toolbarEnabled, this)), L.EditToolbar && this.options.edit && (e = new L.EditToolbar(this.options.edit), this._toolbars[L.EditToolbar.TYPE] = e, this._toolbars[L.EditToolbar.TYPE].on("enable", this._toolbarEnabled, this)), L.toolbar = this
            },

Just in curious, I tried commenting out the line which throws the error, then the page loaded without any error but the draw controls were not created.

I am exhausted with this. I wonder if any one ran in to this issue or could help me with their preciouses expertise.