set firebase web push notifications in vue-laravel inertia application

Hello everyone I have trouble setting my web push notifications with firebase. I have my firebase-messaging-sw.js file in public folder

importScripts("https://www.gstatic.com/firebasejs/7.23.0/firebase-app.js");
importScripts(
    "https://www.gstatic.com/firebasejs/7.23.0/firebase-messaging.js"
);

/*
Initialize the Firebase app in the service worker by passing in the messagingSenderId.
* New configuration for app@pulseservice.com
*/
firebase.initializeApp({
    apiKey: "AIzaSyD9.......",
    authDomain: "projekatzasve.firebaseapp.com",
    projectId: "projekatzasve",
    storageBucket: "projekatzasve.appspot.com",
    messagingSenderId: "545.......",
    appId: "1:5454.....:web:6692e14.......",
    measurementId: "G-JV2.....",
});

/*
Retrieve an instance of Firebase Messaging so that it can handle background messages.
*/
const messaging = firebase.messaging();
messaging.setBackgroundMessageHandler(function (payload) {
    console.log(
        "[firebase-messaging-sw.js] Received background message ",
        payload
    );
    /* Customize notification here */
    const notificationTitle = "Background Message Title";
    const notificationOptions = {
        body: "Background Message body.",
        icon: "/itwonders-web-logo.png",
    };

    return self.registration.showNotification(
        notificationTitle,
        notificationOptions
    );
});

in my Profile.vue file i have

<template>
  <div class="flex flex-col">
    
      <!-- push notif -->
      <button @click="initFirebaseMessagingRegistration">Push</button>
       
      <!-- end push notif -->
     
  </div>
</template>

<script src="https://www.gstatic.com/firebasejs/7.23.0/firebase.js"></script>
<script>


import firebase from "firebase/app";

const firebaseConfig = {
    apiKey: "AIzaSy.........",
    authDomain: "projekatzasve.firebaseapp.com",
    projectId: "projekatzasve",
    storageBucket: "projekatzasve.appspot.com",
    messagingSenderId: "54.....",
    appId: "1:5.....:web:66......",
    measurementId: "G-JV....."
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);
 


export default {
  name: 'ProfileSettings',
  components: {TextInput, Modal},
  mounted() {
    this.token = document.querySelector('meta[name="csrf-token"]').content;
  },
  data() {
    return {
      passChange: false,
      showModal: false,
      buttonText: 'Obriši',
      message: '',
      finished: false,
      action: 'web.user.delete',
      useAxios: true,
      newsletterIsActive: this.$page.auth.user.news_letter || false,
      confirmNewPass: null,
      newPass: null,
      currentPass: null,
      showVerifyInput: false,
      code: null,
      updated: null,
      method: 'get',
      token: null
    }
  },
  methods: {
    
    //push
    initFirebaseMessagingRegistration() {
       const messaging = firebase.messaging();
        messaging
            .requestPermission()
            .then(function () {
                return messaging.getToken()
            })
            .then(function(token) {
                console.log(token);
  
            }).catch(function (err) {
                console.log('User Chat Token Error'+ err);
            });
            
     }
           
    
  },
}

</script>

when i use .requestPermission() it says I should not use it but when I try

initFirebaseMessagingRegistration() {
       const messaging = firebase.messaging();
        const token = messaging.messaging.getToken();
        console.log(token);

          
            
     }

I have error

Error in v-on handler: "TypeError: firebase_app__WEBPACK_IMPORTED_MODULE_2__.default.messaging is not a function" Blockquote

also i have installed npm i firebase package. Can you help me i need to get token so can send it on laravel route and save it in database??