diff --git a/packages/vite-plugin-checker/__tests__/e2e/Sandbox/Sandbox.ts b/packages/vite-plugin-checker/__tests__/e2e/Sandbox/Sandbox.ts
index 1a9d82c5..a11d8576 100644
--- a/packages/vite-plugin-checker/__tests__/e2e/Sandbox/Sandbox.ts
+++ b/packages/vite-plugin-checker/__tests__/e2e/Sandbox/Sandbox.ts
@@ -115,13 +115,13 @@ export async function waitForHmrOverlay(): Promise<
   const element = await page.waitForSelector('vite-plugin-checker-error-overlay', {
     state: 'attached',
   })
-  return element
+  return element as any
 }
 
 export async function getHmrOverlay(): Promise<ElementHandle<'vite-plugin-checker-error-overlay'> | null> {
   const dom = await page.$('vite-plugin-checker-error-overlay')
   if (dom) console.log('found vite-plugin-checker-error-overlay')
-  return dom
+  return dom as any
 }
 
 export async function getHmrOverlayText(
diff --git a/playground/vue3-vue-tsc/__tests__/__snapshots__/test.spec.ts.snap b/playground/vue3-vue-tsc/__tests__/__snapshots__/test.spec.ts.snap
new file mode 100644
index 00000000..2913d7c6
--- /dev/null
+++ b/playground/vue3-vue-tsc/__tests__/__snapshots__/test.spec.ts.snap
@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`vue3-vue-tsc serve get initial error and subsequent error 1`] = `"[{\\"checkerId\\":\\"TypeScript\\",\\"frame\\":\\"    1 | <template>/n    2 |   <img alt=/\\"Vue logo/\\" src=/\\"./assets/logo.png/\\" />/n  > 3 |   <HelloWorld msg1=/\\"Diana/\\" />/n      |    ^^^^^^^^^^/n    4 | </template>/n    5 |/n    6 | <script lang=/\\"ts/\\">\\",\\"id\\":\\"<PROJECT_ROOT>/temp/vue3-vue-tsc/src/App.vue\\",\\"level\\":1,\\"loc\\":{\\"column\\":4,\\"file\\":\\"<PROJECT_ROOT>/temp/vue3-vue-tsc/src/App.vue\\",\\"line\\":3},\\"message\\":\\"Type '{ msg1: string; }' is not assignable to type 'IntrinsicAttributes & Partial<{}> & Omit<Readonly<{ msg?: unknown; } & { msg: string; } & {}> & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>'./n  Property 'msg' is missing in type '{ msg1: string; }' but required in type 'Omit<Readonly<{ msg?: unknown; } & { msg: string; } & {}> & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>'.\\",\\"stack\\":\\"\\"}]"`;
+
+exports[`vue3-vue-tsc serve get initial error and subsequent error 2`] = `
+"
+ ERROR(TypeScript)  Type '{ msg1: string; }' is not assignable to type 'IntrinsicAttributes & Partial<{}> & Omit<Readonly<{ msg?: unknown; } & { msg: string; } & {}> & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>'.
+  Property 'msg' is missing in type '{ msg1: string; }' but required in type 'Omit<Readonly<{ msg?: unknown; } & { msg: string; } & {}> & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>'.
+ FILE  <PROJECT_ROOT>/temp/vue3-vue-tsc/src/App.vue:3:4
+
+    1 | <template>
+    2 |   <img alt=\\"Vue logo\\" src=\\"./assets/logo.png\\" />
+  > 3 |   <HelloWorld msg1=\\"Diana\\" />
+      |    ^^^^^^^^^^
+    4 | </template>
+    5 |
+    6 | <script lang=\\"ts\\">
+
+[TypeScript] Found 1 error. Watching for file changes."
+`;
+
+exports[`vue3-vue-tsc serve get initial error and subsequent error 3`] = `"[{\\"checkerId\\":\\"TypeScript\\",\\"frame\\":\\"    1 | <template>/n    2 |   <img alt=/\\"Vue logo/\\" src=/\\"./assets/logo.png/\\" />/n  > 3 |   <HelloWorld msg2=/\\"Diana/\\" />/n      |    ^^^^^^^^^^/n    4 | </template>/n    5 |/n    6 | <script lang=/\\"ts/\\">\\",\\"id\\":\\"<PROJECT_ROOT>/temp/vue3-vue-tsc/src/App.vue\\",\\"level\\":1,\\"loc\\":{\\"column\\":4,\\"file\\":\\"<PROJECT_ROOT>/temp/vue3-vue-tsc/src/App.vue\\",\\"line\\":3},\\"message\\":\\"Type '{ msg2: string; }' is not assignable to type 'IntrinsicAttributes & Partial<{}> & Omit<Readonly<{ msg?: unknown; } & { msg: string; } & {}> & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>'./n  Property 'msg' is missing in type '{ msg2: string; }' but required in type 'Omit<Readonly<{ msg?: unknown; } & { msg: string; } & {}> & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>'.\\",\\"stack\\":\\"\\"}]"`;
+
+exports[`vue3-vue-tsc serve get initial error and subsequent error 4`] = `
+"
+ ERROR(TypeScript)  Type '{ msg2: string; }' is not assignable to type 'IntrinsicAttributes & Partial<{}> & Omit<Readonly<{ msg?: unknown; } & { msg: string; } & {}> & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>'.
+  Property 'msg' is missing in type '{ msg2: string; }' but required in type 'Omit<Readonly<{ msg?: unknown; } & { msg: string; } & {}> & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>'.
+ FILE  <PROJECT_ROOT>/temp/vue3-vue-tsc/src/App.vue:3:4
+
+    1 | <template>
+    2 |   <img alt=\\"Vue logo\\" src=\\"./assets/logo.png\\" />
+  > 3 |   <HelloWorld msg2=\\"Diana\\" />
+      |    ^^^^^^^^^^
+    4 | </template>
+    5 |
+    6 | <script lang=\\"ts\\">
+
+[TypeScript] Found 1 error. Watching for file changes."
+`;
diff --git a/playground/vue3-vue-tsc/__tests__/test.spec.ts b/playground/vue3-vue-tsc/__tests__/test.spec.ts
index a969dd91..2ff2a456 100644
--- a/playground/vue3-vue-tsc/__tests__/test.spec.ts
+++ b/playground/vue3-vue-tsc/__tests__/test.spec.ts
@@ -1,13 +1,26 @@
+import stringify from 'fast-json-stable-stringify'
 import {
+  killServer,
   preTest,
+  resetReceivedLog,
+  sleepForEdit,
+  sleepForServerReady,
+  stripedLog,
   viteBuild,
-} from '../../../packages/vite-plugin-checker/__tests__/e2e/Sandbox/Sandbox'
+  viteServe,
+} from 'vite-plugin-checker/__tests__/e2e/Sandbox/Sandbox'
 import {
   editFile,
   sleep,
   testDir,
   WORKER_CLEAN_TIMEOUT,
-} from '../../../packages/vite-plugin-checker/__tests__/e2e/testUtils'
+} from 'vite-plugin-checker/__tests__/e2e/testUtils'
+import { WS_CHECKER_ERROR_EVENT } from 'vite-plugin-checker/src/client'
+
+import { copyCode } from '../../../scripts/jestSetupFilesAfterEnv'
+import { serializers } from '../../../scripts/serializers'
+
+expect.addSnapshotSerializer(serializers)
 
 beforeAll(async () => {
   await preTest()
@@ -18,16 +31,55 @@ afterAll(async () => {
 })
 
 describe('vue3-vue-tsc', () => {
+  beforeEach(async () => {
+    await copyCode()
+  })
+
+  describe('serve', () => {
+    afterEach(async () => {
+      await killServer()
+    })
+
+    it('get initial error and subsequent error', async () => {
+      let diagnostics: any
+      await viteServe({
+        cwd: testDir,
+        wsSend: (_payload) => {
+          if (_payload.type === 'custom' && _payload.event === WS_CHECKER_ERROR_EVENT) {
+            diagnostics = _payload.data.diagnostics
+          }
+        },
+      })
+      await sleepForServerReady(2)
+      expect(stringify(diagnostics)).toMatchSnapshot()
+      expect(stripedLog).toMatchSnapshot()
+
+      console.log('-- edit file --')
+      resetReceivedLog()
+      editFile('src/App.vue', (code) =>
+        code.replace('<HelloWorld msg1="Diana" />', '<HelloWorld msg2="Diana" />')
+      )
+      await sleepForEdit()
+      expect(stringify(diagnostics)).toMatchSnapshot()
+      expect(stripedLog).toMatchSnapshot()
+    })
+  })
+
   describe('build', () => {
+    const errMsg = `error TS2322: Type '{ msg1: string; }' is not assignable to type 'IntrinsicAttributes & Partial<{}> & Omit<Readonly<{ msg?: unknown; } & { msg: string; } & {}> & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>'.`
+
     it('enableBuild: true', async () => {
-      await viteBuild({ expectedErrorMsg: 'error TS2322', cwd: testDir })
+      await viteBuild({
+        expectedErrorMsg: errMsg,
+        cwd: testDir,
+      })
     })
 
     it('enableBuild: false', async () => {
       editFile('vite.config.ts', (code) =>
-        code.replace('vueTsc: true', 'vueTsc: true, enableBuild: false')
+        code.replace('vueTsc: true', 'vueTsc: true, enableBuild: false,')
       )
-      await viteBuild({ unexpectedErrorMsg: 'error TS2322', cwd: testDir })
+      await viteBuild({ unexpectedErrorMsg: errMsg, cwd: testDir })
     })
   })
 })
diff --git a/playground/vue3-vue-tsc/src/App.vue b/playground/vue3-vue-tsc/src/App.vue
index 6cb7dcee..a71f40f7 100644
--- a/playground/vue3-vue-tsc/src/App.vue
+++ b/playground/vue3-vue-tsc/src/App.vue
@@ -1,6 +1,6 @@
 <template>
   <img alt="Vue logo" src="./assets/logo.png" />
-  <HelloWorld msg12="j" />
+  <HelloWorld msg1="Diana" />
 </template>
 
 <script lang="ts">