diff --git a/src/hotReload.ts b/src/hotReload.ts
index d29883b20..a445b650a 100644
--- a/src/hotReload.ts
+++ b/src/hotReload.ts
@@ -7,11 +7,12 @@ export function genHotReloadCode(
   return `
 /* hot reload */
 if (module.hot) {
-  script.__hmrId = "${id}"
+  __exports__.__hmrId = "${id}"
   const api = __VUE_HMR_RUNTIME__
   module.hot.accept()
-  if (!api.createRecord('${id}', script)) {
-    api.reload('${id}', script)
+  if (!api.createRecord('${id}', __exports__)) {
+    console.log('reload')
+    api.reload('${id}', __exports__)
   }
   ${templateRequest ? genTemplateHotReloadCode(id, templateRequest) : ''}
 }
@@ -21,6 +22,7 @@ if (module.hot) {
 function genTemplateHotReloadCode(id: string, request: string) {
   return `
   module.hot.accept(${request}, () => {
+    console.log('re-render')
     api.rerender('${id}', render)
   })
 `
diff --git a/src/index.ts b/src/index.ts
index 0dcd1471b..d898d324c 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -245,10 +245,6 @@ export default function loader(
     propsToAttach.push([`__scopeId`, `"data-v-${id}"`])
   }
 
-  if (needsHotReload) {
-    code += genHotReloadCode(id, templateRequest)
-  }
-
   // Expose filename. This is used by the devtools and Vue runtime warnings.
   if (!isProduction) {
     // Expose the file's full path in development, so that it can be opened
@@ -286,13 +282,19 @@ export default function loader(
 
   // finalize
   if (!propsToAttach.length) {
-    code += `\n\nexport default script`
+    code += `\n\nconst __exports__ = script;`
   } else {
     code += `\n\nimport exportComponent from ${exportHelperPath}`
-    code += `\nexport default /*#__PURE__*/exportComponent(script, [${propsToAttach
+    code += `\nconst __exports__ = /*#__PURE__*/exportComponent(script, [${propsToAttach
       .map(([key, val]) => `['${key}',${val}]`)
       .join(',')}])`
   }
+
+  if (needsHotReload) {
+    code += genHotReloadCode(id, templateRequest)
+  }
+
+  code += `\n\nexport default __exports__`
   return code
 }