I'm trying to implement lazy loading in vue router but when I add the magic comment for webpack it does changes the name of the chunk but it does not group them when they have the same name (see picture 1). Is this normal or am I doing something wrong?

Picture 1: screenshot of prefetched files in network tab

Code:

```
function lazyAuthenticationComponents(component) {

return () => import(/* webpackChunkName: "Authentication" */`@/components/Authentication/${component}.vue`)
}

export default {
  path: '/auth', redirect: '/auth/login',
  component: lazyAuthenticationComponents('Authentication'),
  children: [
    {
      path: 'login',
      component: ()=> import(/* webpackChunkName: "Authentication" */ '@/pages/Authentication/Login/LoginView.vue'),
      name: 'login'
    },

```

All other routes use the lazyAuthenticationComponents function because they share a common path, the only one that is located somewhere else has its own individual import, as I said before I do get the prefetched files but not in just one chunk but multiple.

Im using "vue": "^2.6.12",