Vue router lazy loading not working or creating separate chunk files

I'm trying to implement some lazy loading on my routes but not being successful. This is how my index.js files on my router folder looks likes

import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";
import Login from "../views/Login";
import Register from "../views/Register";
import ResetPw from "../views/ResetPw";
import firebase from "firebase/app";

Vue.use(VueRouter);

const routes = [
    {
        path: "/",
        name: "home",
        component: Home,
        meta: {
            requiresAuth: true
        }
    },
    {
        path: "/login",
        name: "login",
        component: Login,
    },
    {
        path: "/register",
        name: "register",
        component: Register,
    },
    {
        path: "/resetpw",
        name: "resetpw",
        component: ResetPw,
    },
    {
        path: "/member",
        name: "memberlist",
        // component: Memberlist,
        component: () => import('../views/MemberList.vue'),
        meta: {
            requiresAuth: true
        }
    },
    {
        path: "/removed",
        name: "removedlog",
        // component: RemovedLog,
        component: () => import('../views/RemovedLog.vue'),
        meta: {
            requiresAuth: true
        }
    },
    {
        path: "/log",
        name: "pointlog",
        // component: PointLog,
        component: () => import('../views/PointLog.vue'),
        meta: {
            requiresAuth: true
        }
    },
    {
        path: "/:name",
        name: "member",
        // component: Member,
        component: () => import('../views/Member.vue'),
        meta: {
            requiresAuth: true
        }
    },
    {
        path: "/edit/:name",
        name: "edit",
        // component: EditPlayer,
        component: () => import('../views/EditPlayer.vue'),
        meta: {
            requiresAuth: true
        }
    },
    {
        path: "/delete/:name",
        name: "delete",
        // component: DeletePlayer,
        component: () => import('../views/DeletePlayer.vue'),
        meta: {
            requiresAuth: true
        }
    },
    {
        path: "/editremoved/:name",
        name: "editremoved",
        // component: EditRemoved,
        component: () => import('../views/EditRemoved.vue'),
        meta: {
            requiresAuth: true
        }
    }
];

const router = new VueRouter({
    mode: "history",
    base: process.env.BASE_URL,
    routes
});

router.beforeEach((to, from, next) => {
    const requiresAuth = to.matched.some(record => record.meta.requiresAuth);
    const isAuthenticated = firebase.auth().currentUser;
    if (requiresAuth && !isAuthenticated) {
        next("/login");
    } else {
        next();
    }
});

export default router;

I'm not sure what I'm doing wrong or what I'm missing, this is how the oficial vue-router documentation says to implement the lazy loading https://router.vuejs.org/guide/advanced/lazy-loading.html and also how many tutorials explain how to implement lazy loading.

When I do a build, it only creates 1 .js file when it is supposed to build one for each route and using the network tab on firefox, when moving between routes no new route .js file is loaded, I only have an app.js