Nuxt Hot reloading for new components Is not working - vue.js

Question

Nuxt hot reloading somehow works for old components, but any new components that I have created today, doesn't seem to be watched by the app, and doesn't reload. I have to restart the app each time to see the changes applied to these new files.
The machine that I am using is MacOs latest Mojave system.
I realized people might ask for the package.json file so here is the file
{
"name": "theta",
"version": "1.0.0",
"description": "My fabulous Nuxt.js project",
"private": true,
"scripts": {
"dev": "NUXT_HOST=0.0.0.0 NUXT_PORT=3333 nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate",
"devHttps": "node server/index.js"
},
"dependencies": {
"#clampy-js/vue-clampy": "^1.0.6",
"#fortawesome/free-brands-svg-icons": "^5.9.0",
"#fortawesome/free-solid-svg-icons": "^5.9.0",
"#nuxtjs/auth": "^4.7.0",
"#nuxtjs/axios": "^5.5.4",
"#nuxtjs/component-cache": "^1.1.5",
"#nuxtjs/dotenv": "^1.3.0",
"#nuxtjs/google-adsense": "^1.1.3",
"#nuxtjs/google-analytics": "^2.2.0",
"#nuxtjs/moment": "^1.2.0",
"#nuxtjs/pwa": "^2.6.0",
"#nuxtjs/robots": "^2.2.0",
"#nuxtjs/style-resources": "^0.1.2",
"#nuxtjs/svg-sprite": "^0.2.1",
"#nuxtjs/toast": "^3.2.1",
"#nuxtjs/vuetify": "^0.5.6",
"#sum.cumo/nuxt-styleguide": "^5.3.0",
"atob": "^2.1.2",
"axios": "^0.19.0",
"browserslist": "^4.6.2",
"caniuse-lite": "^1.0.30000974",
"chart.js": "^2.8.0",
"cookie": "^0.3.1",
"cookie-parser": "^1.4.4",
"cookie-universal-nuxt": "^2.0.16",
"cross-env": "^5.2.0",
"echarts": "^4.2.1",
"element-ui": "^2.9.1",
"epic-spinners": "^1.1.0",
"fstream": "^1.0.12",
"imagemagick": "^0.1.3",
"intersection-observer": "^0.5.1",
"js-yaml": "^3.13.1",
"jwt-decode": "^2.2.0",
"lodash": "^4.17.11",
"lodash-es": "^4.17.11",
"moment": "^2.24.0",
"nuxt": "^2.8.1",
"nuxt-compress": "^1.0.2",
"nuxt-device-detect": "^1.1.5",
"nuxt-fontawesome": "^0.4.0",
"nuxt-stripe-module": "^2.0.0",
"nuxt-universal-storage": "^0.2.0",
"nuxt-validate": "^0.1.3",
"nuxt-webfontloader": "^1.1.0",
"swiper": "^4.5.0",
"tar": "^4.4.10",
"tb-skeleton": "^0.3.6",
"uuid": "^3.3.2",
"v-charts": "^1.19.0",
"v-click-outside-x": "^3.7.1",
"vee-validate": "^2.2.10",
"vue": "^2.6.10",
"vue-avatar-editor-improved": "^1.0.4",
"vue-awesome-swiper": "^3.1.3",
"vue-chartjs": "^3.4.2",
"vue-clamp": "^0.2.1",
"vue-count-to": "^1.0.13",
"vue-croppa": "^1.3.8",
"vue-infinite-loading": "^2.4.4",
"vue-line-clamp": "^1.3.2",
"vue-loaders": "^2.0.0",
"vue-match-media": "^1.0.3",
"vue-scrollama": "^1.1.1",
"vue-scroller": "^2.2.4",
"vue-scrollto": "^2.15.0",
"vue-server-renderer": "^2.6.10",
"vue-swipe-tab": "^2.0.4",
"vue-template-compiler": "^2.6.10",
"vue-text-dot": "^1.0.0",
"vue-the-mask": "^0.11.1",
"vue-tiny-lazyload-img": "^0.1.0",
"vue-truncate-collapsed": "^2.1.0",
"vue-zondicons": "^0.1.10",
"vue2-datepicker": "^2.11.2",
"vue2-editor": "^2.8.1",
"vue2-touch-events": "^1.1.2",
"vuetify-loader": "^1.2.2",
"vuetify-upload-button": "^1.2.2",
"vuex-router-sync": "^5.0.0"
},
"devDependencies": {
"autoprefixer": "^9.6.0",
"css-loader": "^2.1.1",
"moment-locales-webpack-plugin": "^1.0.7",
"node-sass": "^4.12.0",
"nodemon": "^1.19.1",
"postcss-gap-properties": "^2.0.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2"
}
}
Here is my nuxt config file
const pkg = require('./package')
const webpack = require('webpack')
require('dotenv').config()
module.exports = {
mode: 'universal',
/*
** Headers of the page
*/
head: {
title: 'ノーブル',
meta: [{
charset: 'utf-8'
},
{
name: 'viewport',
content: 'width=device-width, initial-scale=1,minimum-scale=1, maximum-scale=1'
},
{
hid: 'description',
name: 'description',
content: '小説家・読者のプラットフォーム'
}
],
link: [{
rel: 'icon',
type: 'image/x-icon',
href: '/favicon.ico'
}],
script: [{
src: '/js/fb-sdk.js'
}, {
src: '/js/gg-sdk.js'
}]
},
/*
** Customize the progress-bar color
*/
loading: {
color: '#af9bd0',
height: '3px',
continuous: true
},
generate: {
routes: [
'/ads.txt',
]
},
/*
** Global CSS
*/
css: [
'element-ui/lib/theme-chalk/index.css',
'swiper/dist/css/swiper.css',
"assets/css/index.css",
"assets/css/main.scss",
'vue-loaders/dist/vue-loaders.css'
],
/*
** Plugins to load before mounting the App
*/
plugins: [
'#/plugins/element-ui',
'#/plugins/intercept',
{
src: '~plugins/vue-star-rating',
ssr: false
},
{
src: '~/plugins/swiper',
ssr: false
},
{
src: '~/plugins/intercept',
ssr: false
},
{
ssr: false,
src: '~/plugins/avatar'
},
{
ssr: false,
src: "~plugins/clickOutside"
}, {
ssr: false,
src: "~plugins/vueEditor"
}, {
src: '#/plugins/vueMask',
ssr: false
}, {
src: '#/plugins/zondiIcon',
ssr: false
}, {
src: '#/plugins/elementLoading',
ssr: false
}, {
src: '#/plugins/vue-swipe-tab',
ssr: false
},
{
src: '#/plugins/pull-to',
ssr: false
},
{
src: '#/plugins/datePicker',
ssr: false
}, {
src: '#/plugins/vuelineclamp',
ssr: false
}, {
src: '#/plugins/graphs',
ssr: false
}, {
src: '#/plugins/infinite',
ssr: false
}, {
src: '#/plugins/vueClamp',
ssr: false
}, {
src: '#/plugins/watchMedia',
ssr: false
}, {
src: '#/plugins/scrollama',
ssr: false
}, {
src: '#/plugins/countTo',
ssr: false
}, {
src: '#/plugins/chartLine',
ssr: false
}, {
src: '#/plugins/skeleton',
ssr: false
}, {
src: '#/plugins/gAuth',
ssr: false,
}, {
src: '#/plugins/epicSpinners',
ssr: false,
},
{
src: '#/plugins/auth',
}
],
/*
** Nuxt.js modules
*/
modules: [
['#nuxtjs/vuetify', {
treeShake: true
}],
'#nuxtjs/pwa',
'nuxt-device-detect',
'nuxt-webfontloader',
'#nuxtjs/axios',
'#nuxtjs/dotenv',
'#nuxtjs/svg-sprite',
'#nuxtjs/style-resources',
['nuxt-validate', {
lang: 'ja',
}],
['#nuxtjs/robots', {
UserAgent: '*',
Disallow: '/',
UserAgent: 'Googlebot',
Disallow: '',
UserAgent: 'Yahoo-slurp',
Disallow: '',
UserAgent: 'Msnbot',
Disallow: ''
}],
['#nuxtjs/moment', {
locales: ['ja'],
defaultLocale: 'ja'
}],
['#nuxtjs/component-cache', {
maxAge: 1000 * 60 * 60
}],
['#nuxtjs/google-adsense', {
id: 'pub-4438410171989811'
}],
'cookie-universal-nuxt',
['nuxt-fontawesome', {
component: 'fa',
imports: [{
set: '#fortawesome/free-solid-svg-icons',
icons: ['fas']
}, {
set: '#fortawesome/free-brands-svg-icons',
icons: ['fab']
}]
}],
['#nuxtjs/google-analytics', {
id: 'UA-119733183-2',
autoTracking: {
page: false
}
}],
['nuxt-universal-storage', {
storage: {
vuex: true, // boolean or {namespace}
localStorage: true, // boolean or {prefix }
cookie: true, // boolean or {prefix, options }
initialState: {}, // Object {}
ignoreExceptions: true //
}
}],
['#nuxtjs/dotenv', {
/* module options */
}],
['#nuxtjs/toast', {
position: 'top-right',
duration: 5000
}],
['nuxt-stripe-module', {
publishableKey: process.env.STRIPE_KEY,
version: 'v3', // Default
}],
"nuxt-compress",
],
/*
** Axios module configuration
*/
axios: {
baseURL: process.env.SERVER_URL || 'http://0.0.0.0:5000/api',
credentials: false,
proxyHeaders: false
},
auth: {
strategies: {
google: {
client_id: process.env.GOOGLE_CLIENT_ID,
user: false,
redirect_uri: 'http://127.0.0.1:3000/'
},
facebook: {
client_id: process.env.FACEBOOK_CLIENT_ID,
userinfo_endpoint: false,
scope: ['public_profile', 'email'],
redirect_uri: 'https://tolocalhost.com/'
},
local: {
_scheme: '~/auth/local.js',
endpoints: {
login: {
url: 'auth/login',
method: 'post',
propertyName: false
},
user: {
url: 'user/show',
method: 'get',
propertyName: false
},
logout: false
}
}
},
redirect: {
login: '/auth/login',
logout: '/',
callback: '/',
home: '/'
},
plugins: ['~/plugins/auth.js']
},
router: {
middleware: ['auth'],
linkActiveClass: 'active-link'
},
webfontloader: {
google: {
families: ['IBM Plex Sans:300,400,700', 'Noto Sans JP:400,500', 'Sniglet:400,800'] //Loads Lato font with weights 400 and 700
}
},
'manifest': {
name: 'ノーブル　小説',
short_name: 'ノーブル',
lang: 'ja'
},
/*
** Build configuration
*/
build: {
/*
** You can extend webpack config here
*/
extend(config, ctx) {
},
splitChunks: {
layouts: true
},
styleResources: {
sass: ['./assets/css/abstracts/main.scss']
},
transpile: ['vue-clamp', 'resize-detector'],
postcss: {
plugins: [
require('postcss-gap-properties')(),
require('autoprefixer')({
grid: true,
flexbox: true,
stats: {
warnings: false
}
})
]
},
plugins: [new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery'
})]
},
server: {
port: process.env.CLIENT_PORT || 4000, // default: 3000
host: process.env.API_HOST || '0.0.0.0', // default: localhost
},
}
I've searched everywhere online for the answer but none that seemed close to my current situation.

Answer 1

Oh I got it, it seems like there was a misspelling in importing of the component, and thus wasn't connected to the main nuxt network, meaning the component doesn't adhere to the hot reloading watched file.

Answer 2

Had the problem of hot reload not working.
Solved that by adding
watchers: {
webpack: {
aggregateTimeout: 300,
poll: 1000
}
}
in the nuxt.config.js file.