Adding FCM to vue PWA - firebase

Question

I am trying to add Firebase Massaging to my VueJS PWA app, but I am getting the following error:
# ./src/main.js 6:0-28 28:13-16 # multi
(webpack)-dev-server/client?http://192.168.1.7:8080/sockjs-node
(webpack)/hot/dev-server.js ./src/main.js
manifest.json in the Public folder looks like :
"start_url": ".",
"display": "standalone",
"background_color": "#000000",
"theme_color": "#210499",
"gcm_sender_id": "103953800507"
firebase-messaging-sw.js in the public folder looks like :
importScripts('https://www.gstatic.com/firebasejs/3.9.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/3.9.0/firebase-messaging.js');
var config = {
messagingSenderId: "452219633362"
};
firebase.initializeApp(config);
let messaging = firebase.messaging();
App.vue file Looks like :
created() {
var config = {
apiKey: "My apiKey",
authDomain: "My firebase domain",
databaseURL: "database URL",
projectId: "Project ID",
storageBucket: "storage Bucket",
messagingSenderId: "Sender id "
};
firebase.initializeApp(config);
let messaging = firebase.messaging();
messaging
.requestPermission()
.then(() => firebase.messaging().getToken())
.then(token => {
console.log(token); // Receiver Token to use in the notification
})
.catch(function(err) {
console.log("Unable to get permission to notify.", err);
});
messaging.onMessage(function(payload) {
console.log("Message received. ", payload);
// ...
});
}
main.js looks like :
import Vue from "vue";
import App from "./App.vue";
import firebase from "firebase";
import "../public/firebase-messaging-sw"
Vue.config.productionTip = false;
var config = {
apiKey: "My apiKey",
authDomain: "My firebase domain",
databaseURL: "database URL",
projectId: "Project ID",
storageBucket: "storage Bucket",
messagingSenderId: "Sender id "
};
firebase.initializeApp(config);
Vue.prototype.$messaging = firebase.messaging()
navigator.serviceWorker.register('/firebase-messaging-sw.js')
.then((registration) => {
Vue.prototype.$messaging.useServiceWorker(registration)
}).catch(err => {
console.log(err)
})
new Vue({
render: h => h(App)
}).$mount("#app");
I cannot point out what I did wrong. I did use Vue-Cli version 3. Can someone help me with this error?