title: Firebase Cloud Messaging foreground notification not working in Vue
body: <p>I've been working on integrating FCM in my Vue PWA app. So far I've managed to get the background notification working, but handling notifications when the app's on the foreground doesn't work. Here's my code.</p>
  
  <h3><code>src/App.vue</code></h3>
  
  <pre class="lang-js prettyprint-override"><code>import firebase from './plugins/firebase'
  
  export default {
    // Other stuff here...
  
    methods: {
      prepareFcm () {
        var messaging = firebase.messaging()
        messaging.usePublicVapidKey(this.$store.state.fcm.vapidKey)
        messaging.getToken().then(async fcmToken =&gt; {
          this.$store.commit('fcm/setToken', fcmToken)
          messaging.onMessage(payload =&gt; {
            window.alert(payload)
          })
        }).catch(e =&gt; {
          this.$store.commit('toast/setError', 'An error occured to push notification.')
        })
      }
    },
  
    mounted () {
      this.prepareFcm()
    }
  }
  </code></pre>
  
  <h3><code>public/firebase-messaging-sw.js</code></h3>
  
  <pre class="lang-js prettyprint-override"><code>importScripts('https://www.gstatic.com/firebasejs/5.5.6/firebase-app.js')
  importScripts('https://www.gstatic.com/firebasejs/5.5.6/firebase-messaging.js')
  
  firebase.initializeApp({
    messagingSenderId: '123456789'
  })
  
  const messaging = firebase.messaging()
  
  messaging.setBackgroundMessageHandler(function (payload) {
    return self.registration.showNotification(payload)
  })
  </code></pre>
  
  <h3><code>src/plugins/firebase.js</code></h3>
  
  <pre class="lang-js prettyprint-override"><code>import firebase from '@firebase/app'
  import '@firebase/messaging'
  // import other firebase stuff...
  
  const firebaseConfig = {
    apiKey: '...',
    authDomain: '...',
    databaseURL: '...',
    projectId: '...',
    storageBucket: '...',
    messagingSenderId: '123456789',
    appId: '...'
  }
  
  firebase.initializeApp(firebaseConfig)
  
  export default firebase
  </code></pre>
  
  <p>What did I do wrong?</p>