I have a Vue.js application that uses the Vue router to handle view/page changes. I have encountered an issue where when I log in it will direct me to /chat however it will not register the service worker until I hard refresh the page. How can I make the service worker be scoped to /chat and still register/run the code for the service worker?

What I currently have is the import of my register service worker file in my chat view Chat.vue file. I am importing the file at the top of the script section. I thought this would load it upon Chat.vue loading however it seems not to.

I've been reading for a few hours on scope and service workers, this seems like the right way but maybe I am missing something?