Why is Vue not finding the component?

Question

Vue.js

I'm learning Vue, I decided to build a test build on webpack. I'm testing on a local server.
Page components are .vue files. I
open the site, the main page component connects normally, and if I go to another page, for example / test, then the error "Object not found!" component is not connected. In this case, if you open the left page of the / qwerty type, then the page component is not found is connected.

Structure:

template
-- dist
-- -- build.js
-- src
-- -- app
-- -- -- components
-- -- -- -- шапка, футер etc
-- -- -- pages
-- -- -- -- test-data
-- -- -- -- -- test-data.vue
-- -- -- -- main
-- -- -- -- -- main.vue
-- -- -- -- page-not-found
-- -- -- -- -- page-not-found.vue
-- -- -- -- index.js
-- -- -- App.vue
-- -- -- app-routes.js
-- -- -- main.js
-- -- public
-- -- -- index.html
-- -- webpack.config.js
index.html

webpack config:

const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
    mode: 'development',
    entry: __dirname + "/src/app/main.js", // webpack entry point. Module to start building dependency graph
    output: {
        path: __dirname + '/dist', // Folder to store generated bundle
        filename: 'build.js',  // Name of generated bundle after build
        publicPath: '/' // public URL of the output directory when referenced in a browser
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            }, {
                test: /\.css$/,
                use: [
                    'vue-style-loader',
                    'css-loader'
                ]
            }
        ]
    },
    plugins: [
        new VueLoaderPlugin()
    ],
    devServer: {  // configuration for webpack-dev-server
        contentBase: './src/public',  //source of static assets
        port: 7700, // port to run dev-server
        historyApiFallback: true,
        hot: true
    }
};

src/app/app-routes.js:

import Vue from 'vue';
import Router from 'vue-router';

import { AppMainPage } from './pages';
import { AppPageNotFound } from './pages';
import { AppTestData } from './pages';

Vue.use(Router);

const appRoutes = [
    {
        path: '/',
        name: 'home',
        component: AppMainPage
    },
    {
        path: '/test',
        name: 'test',
        component: AppTestData
    },
    {
        path: '*',
        name: 'page-not-found',
        component: AppPageNotFound
    }
];

const routes = [...appRoutes];

export default new Router({
    mode: 'history',
    routes
});

So I'm trying to understand why the main one is fine, but /test is not?