FCM browser notification not working in Vue 3

Question

Here's my code. So far I've managed to get the background notification working. (Onmessage not working)

"firebase": "^9.6.7",

firebase-messaging-sw.js

null

App.vue

import { initializeApp } from 'firebase/app';
import { getMessaging, getToken, onMessage  } from "firebase/messaging";

const firebaseConfig = {
      apiKey: "AIzaSyDXnUaeAK",
      authDomain: "test-test.firebaseapp.com",
      projectId: "test-test",
      storageBucket: "test-test.appspot.com",
      messagingSenderId: "123456789",
      appId: "1:38296:web:j88054626",
      measurementId: "X-TEST"
    };
    initializeApp(firebaseConfig);
    const messaging = getMessaging();
    getToken(messaging, { vapidKey: 'key' })
    .then((currentToken) => {
      console.log("currentToken", currentToken);
      
    })
    onMessage(messaging, (payload) => {
      console.log('Message received. ', payload);
      // ...
    });