diff --git a/example/ScriptSetup.vue b/example/ScriptSetup.vue
index 7f361f42f..3cc768ba6 100644
--- a/example/ScriptSetup.vue
+++ b/example/ScriptSetup.vue
@@ -11,10 +11,10 @@
 import { ref } from 'vue'
 import Button from './Button.vue'
 
-const count = ref(0)
+ref: count = 100
 
 function inc() {
-  count.value++
+  count++
 }
 
 const hello = 'hi from scriptttt'
diff --git a/example/webpack.config.js b/example/webpack.config.js
index 86c5f78a6..31fa405da 100644
--- a/example/webpack.config.js
+++ b/example/webpack.config.js
@@ -53,6 +53,9 @@ module.exports = (env = {}) => {
           {
             test: /\.vue$/,
             loader: 'vue-loader',
+            options: {
+              refSugar: true,
+            },
           },
           {
             test: /\.png$/,
diff --git a/src/index.ts b/src/index.ts
index ed24c5304..8a51d1655 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -40,6 +40,7 @@ export interface VueLoaderOptions {
   transformAssetUrls?: SFCTemplateCompileOptions['transformAssetUrls']
   compiler?: TemplateCompiler | string
   compilerOptions?: CompilerOptions
+  refSugar?: boolean
   hotReload?: boolean
   exposeFilename?: boolean
   appendExtension?: boolean
diff --git a/src/resolveScript.ts b/src/resolveScript.ts
index 309df9cf7..c61094202 100644
--- a/src/resolveScript.ts
+++ b/src/resolveScript.ts
@@ -57,10 +57,12 @@ export function resolveScript(
         id: scopeId,
         isProd,
         inlineTemplate: enableInline,
+        refSugar: options.refSugar,
         babelParserPlugins: options.babelParserPlugins,
         templateOptions: {
-          compiler,
           ssr: isServer,
+          compiler,
+          compilerOptions: options.compilerOptions,
           transformAssetUrls: options.transformAssetUrls || true,
         },
       })