Laravel Mix (Vue + Stylus). Почему при изменении .styl пустая страница при (npm run watch)?

Question

[Вадим Манюк]

Суть проблемы в следующем. Я создал новый проект (Laravel 5.5, Vue.js 2, Stylus). Во время разработки запускаю watch'ер (npm run watch) и каждый раз когда я сохраняю файл со стилями .styl, страница перезагружается и сразу же все исчезает. Интересно то что скрипт скомпилировался нормаль, но сам #app не отрендерился. Но как только я сохраняю любой из компонентов .vue либо просто .js все рендерится как надо.

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)
});

Так же создал файлик .babelrc

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

Бубен:
1. Пробовал вместо
mix.js('resources/assets/js/main.js', 'public/js')
Прописывать

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

Таким способом при сохранении .styl я часто получаю ошибку в консоли:
Uncaught SyntaxError: Unexpected token import

Он просто на переводит es6 в обычный js. Почему так происходит через раз для меня загадка.