diff --git a/packages/template-explorer/src/index.ts b/packages/template-explorer/src/index.ts
index cf97e8e69f7..af90ce6c4b1 100644
--- a/packages/template-explorer/src/index.ts
+++ b/packages/template-explorer/src/index.ts
@@ -2,7 +2,7 @@ import * as m from 'monaco-editor'
 import { compile, CompilerError, CompilerOptions } from '@vue/compiler-dom'
 import { compile as ssrCompile } from '@vue/compiler-ssr'
 import { compilerOptions, initOptions, ssrMode } from './options'
-import { watch } from '@vue/runtime-dom'
+import { watchEffect } from '@vue/runtime-dom'
 import { SourceMapConsumer } from 'source-map'
 
 declare global {
@@ -221,7 +221,7 @@ window.init = () => {
   )
 
   initOptions()
-  watch(reCompile)
+  watchEffect(reCompile)
 }
 
 function debounce<T extends (...args: any[]) => any>(