opened
lichnow
username_0
### Version
2.4.0

### Reproduction link
[https://jsfiddle.net/chrisvfritz/50wL7mdz/](https://jsfiddle.net/chrisvfritz/50wL7mdz/)

### Steps to reproduce
Nested module when be reconfig use hotupdate function,it will not work,and my webpack hot is config fine,hot is work fine,what's wrong?

I change the state of one module in dev server module,hot can not do let vue component get new data,
In fact,commit,getter and other all not work. no i must reload page let store change

this is a bug or my code error, help me,thx!


```
//store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import sidebar from './modules/sidebar'
import test from './modules/test'
import {default as map,hotMapStore} from '@/utils/map'
Vue.use(Vuex)
const store = new Vuex.Store({
	modules: {
		app: {
			namespaced: true,
			modules: {
				sidebar,
				test
			}
		}
	}
})
if(module.hot){
	module.hot.accept(['./modules/sidebar','./modules/test'], () => {

               console.log('hot work') // this will be output,and hot is work fine

                // but hotUpdate api is not work
		const newSidebar = require('./modules/sidebar').default
		const newTest = require('./modules/test').default
		store.hotUpdate({
			modules: {
				app: {
					namespaced: true,
					modules: {
						sidebar: newSidebar,
						test: newTest
					}
				}
			}
		})
	})
}
export default store
```

```
//store/modules/test.js
export default {
    namespaced: true,
    state: {
        mini: false,
        fff: false
    }
}

```

```
//component/test.vue

<template>
<span v-if="test.fff">dddd</span>
<script>
export default {
    computed: {
        test() {
            return this.$store.state.app.test
        }
    }
}
</script>
</template>
```

### What is expected?
when change one of state data in a vuex module,the component which use this state data will be update

### What is actually happening?
nothing heppen,and not work

<!-- generated by vue-issues. DO NOT REMOVE -->
hotUpdate api is not work in nested modules
issue
created
ktsn
username_1
Please provide a reproduction as a github repository or so on.
comment
created
lichnow
username_0
@username_1 Now I create vue project use `vue-cli & webpack template`,I just add a store module
every other thing I not change,but when I change `state.title` value in test.js,console will output
`[vuex] trying to add a new module 'test' on hot reloading, manual reload is needed`
It not updated `state.app.test.title`'s value,but I want to change its value when i change the `test.js` file,it's a bug?

src/store
├── index.js
└── modules
    └── test.js

// App.vue
```
<template>
<div id="app">
<h1 v-if="test.title">Test Title</h1>
</div>
</template>
<script>
    computed: {
        test() {
            return this.$store.state.app.test
        }
    }
  }
</script>
```

// test.js
```
export default {
    namespaced: true,
    state: {
        title: true
    }
}
```

// index.js
```
import Vue from 'vue'
import Vuex from 'vuex'
import testModule from './modules/test'
Vue.use(Vuex)
const store = new Vuex.Store({
	modules: {
		app: {
			namespaced: true,
			modules: {
				test: testModule
			}
		}
	}
})
if (module.hot) {
	module.hot.accept('./modules/test', () => {
		store.hotUpdate({
			modules: {
				test: testModule
			}
		})
	})
}
export default store
```
comment
created
ktsn
username_1
That is expected. you are adding a new module `test` with hotUpdate while you initialize the store with `app.test` module.
comment
created
lichnow
username_0
@username_1 so, how I can do if I want to reconfigure the test module when its file change (el: add a state data,or change a state data value) in hot repleacement model,thx
comment
closed
ktsn
username_1
issue
created
ktsn
username_1
If the last code is what you really want to show as the reproduction, this is not a bug. Because hot update does not add a **new** module during HMR. Also, HMR does not update state since that is not the purpose for HMR. If you want to do that you can simply reload the page.
comment
created
Alendorff
username_2
I have exactly the same problem, however I'm not sure about that original reproduction example. It should be something like that instead:

```javascript
// modules/testModule.js

import submodule from './modules/testSubmodule.js'

export default {
  namespaced: true,
  state,
  mutations,
  actions,
  modules: {
    testSubmodule
  }
}
```
```javascript
// index.js

import testModule from './modules/test'

const store = new Vuex.Store({
  modules: {
    testModule
  }
})

if (module.hot) {
  module.hot.accept(['./modules/testModule'], () => {
    const new_testModule = require('./modules/testModule').default
    
    store.hotUpdate({
      modules: {
        testModule: new_testModule
      }
    })
  })
}
```
comment
created
mrcsmcln
username_3
I'm encountering the same issue as @username_2—same code structure and everything. My versions are different though:

```
"vuex": "^3.0.1",
"webpack": "^4.12.0",
"webpack-dev-server": "^3.1.4",
```

This is straight from the latest `@vue/cli`.
comment
created
jcjolley
username_4
I am encountering this using the latest vue-cli and vuex as well.
@username_1 Would you like us to make a new issue, or should we re-open this one?
comment
created
duola8789
username_5
After I set the hmr config according to document, when I change getters in modules, hmr does work, but when I  change  state in modules, hrm does not work.
I know it's not a bug, but  I think it's not convenient. I have to refresh the page manually.
If I don't use hmr, it's always refresh the page automatically whatever code I change.
comment