Laravel Mix (Vue + Stylus). Why is there a blank page when changing .styl on (npm run watch)?

Question

webpack

The essence of the problem is as follows. I created a new project (Laravel 5.5, Vue.js 2, Stylus). During development, I run watch'er (npm run watch) and every time I save the .styl file, the page reloads and immediately everything disappears. The interesting thing is that the script compiled normally, but the #app itself didn't render. But as soon as I save any of the .vue components or just .js everything renders as it should.
package.json(/)

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "axios": "^0.16.2",
        "babel-preset-es2015": "^6.24.1",
        "babel-preset-stage-2": "^6.24.1",
        "browser-sync": "^2.18.13",
        "browser-sync-webpack-plugin": "^1.2.0",
        "cross-env": "^5.0.1",
        "laravel-mix": "^1.0",
        "lodash": "^4.17.4",
        "stylus": "^0.54.5",
        "stylus-loader": "^3.0.1",
        "svg-spritemap-webpack-plugin": "^1.0.3",
        "vue": "^2.1.10",
        "vue-router": "^2.7.0"
    }
}

webpack.mix.js (/)

mix.js('resources/assets/js/main.js', 'public/js')
      .stylus('resources/assets/stylus/app.styl', 'public/css/app.css')
      .browserSync('localhost:8000');

main.js (/resources/assets/js)

import Vue from 'vue';
import VueRouter from 'vue-router';
import { routes } from './routes/index';
import App from './App.vue';

Vue.use(VueRouter);

const router =  new VueRouter({
    mode: 'history',
    routes
});

new Vue({
    el: '#app',
    router,
    render: h => h(App)
});

I also created a .babelrc file

{
    "presets": ["es2015", "stage-2"]
}

Tambourine:
1. Tried instead of Prescribe
mix.js('resources/assets/js/main.js', 'public/js')

mix.scripts(['resources/assets/js/main.js'], 'public/js/main.js');

In this way, when saving .styl, I often get an error in the console:
Uncaught SyntaxError: Unexpected token import
It simply does not translate es6 into plain js. Why this happens every other time is a mystery to me.