There is one aspect of my vue component that does not hot reload. Load the example vue component below in a page with all the webpack hot reloading business configured.

<template>
  <div :class='$style.foo'>
    Hello
  </div>
</template>

<script>
  export default {
    name: 'App'
  }
</script>

<style module>
  .foo {
    color: red;
  }
</style>

Then once page has loaded change $style.foo -> $style.fo and change the corresponding css class name .foo -> .fo. I would expect the module would reload and there would be no change in the page appearance. What I noticed after inspecting the DOM, is that while the styles get regenerated correctly the template class attribute is now empty as if $style.fo was not defined in the template.

Examples where hot reloading does work:

1. If I load the same component as above with .fo already defined as a css class, then change $style.foo -> $style.fo in the template, then save, the div will pick up the styles of .fo.

2. If I loaded the same component as above, create a new css class .fo and a new element in the template referencing the new class, then save, the component will hot reload as expected.

It seems the problem is that an element bound to a css module class name once loaded, cannot reference newly created css module classes without having to refresh the entire page.

I can create a simple test case repo to demonstrate, but wanted to know if anyone else had confirmed this behavior before spending more time on this.