title: Force Reload on Webpack Async Import
body: <p>I'm currently working on a refactor from a large legacy jquery-only codebase to a vue single page application. In doing so, I'm hoping to separate out my work into managable chunks, maintaining much of the legacy codebase as-is in the code, and slowly pulling pieces and parts out of it to refactor to vue, using an event bus as an intermediary.</p>
  
  <p>However, I'm running into issues because the legacy code has side effects when imported. These side effects are caused by runtime jquery event bound to HTML, and objects and class instances being created wrapping around other HTML as it establishes state immediately on import. This causes a problem with the SPA refactor since I want to be able to navigate away from the page then back to it, but the javascript will remain cached and not reload, now missing all of the HTML and state updates since vue will have removed the html the state was created with then add new html on the re-render.</p>
  
  <p>I'm looking for the best solution to this issue to keep me from having to refactor the code twice--once into a modular import with init calls, and then into a reactive, modular vue paradigm. To do that, I'd like to figure out how to use Webpack's async chunk imports to reload the block of code. I know this is possible due to webpack's hot reloading on a file. I essentially want to force a hot reload of certain imports when a certain route is accessed.</p>
  
  <p>This is what I'm trying to do:</p>
  
  <pre><code>async function reloadLegacyCodeOnSPARoutingChange(){
      cleanAnyPolutingGlobals();
      const initLegacyCode = await import(`./LegacyCode.js`); //somehow force it to reload this as if it were a fresh import
      let thingId = this.$store.state.thingPage.thingId;
      await initLegacyCode(thingId);
      await EventBus.$emit('initLegacyCodeState'); //apply the properties from our reactive state system
  }
  </code></pre>
  
  <p>Is there an effective way to do this from the client?</p>