How to send a test message to a Nuxt app using firebase cloud messaging?

I am trying to setup FCM on my Nuxt app. I followed Firebase's web setup documentation. I set up a method on the default.vue file inside layouts folder to get current device token.

Here is the getDeviceToken() method on the default.vue file

 mounted() {    
    this.getDeviceToken()
  },
 getDeviceToken() {
      const messaging = firebase.messaging()
      messaging
        .requestPermission()
        .then(() => {
          console.log('Have permission')
          return messaging.getToken()
        })
        .then((currentToken) => {
          if (currentToken) {
            console.log('Current Token : ', currentToken)
          }
        })
        .catch((err) => {
          console.log('Error occured', err)
        })
      messaging.onMessage(function(payload) {
        console.log('onMessage: ', payload)
      })
    }

And here is my firebase-messaging-sw.js file

importScripts('https://www.gstatic.com/firebasejs/7.11.0/firebase-app.js')
importScripts('https://www.gstatic.com/firebasejs/7.11.0/firebase-messaging.js')
const firebaseConfig = { 
  apiKey: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxx',
  authDomain: 'xxxxxxxxxxxxx.firebaseapp.com',
  databaseURL: 'xxxxxxxxxxxxxxxxxxxx.firebaseio.com',
  projectId: 'xxxxxxxxxxxxxxxxx',
  storageBucket: 'xxxxxxxxxxxxxxxxx.appspot.com',
  messagingSenderId: 'xxxxxxxxxxx',
  appId: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxe65e18'
}

firebase.initializeApp(firebaseConfig)
const messaging = firebase.messaging()

After this setup, I was able to get the device token when app is running on foreground. But when I tried to send a message using Notification Composer or Postman, I have successful sent status but I am not receiving any notification on the browser. I am not sure why the onMessage method of FCM is not working. Any help would be much appreciated. Thanks