diff --git a/packages/runtime-dom/__tests__/directives/vModel.spec.ts b/packages/runtime-dom/__tests__/directives/vModel.spec.ts
index 339f96690c6..89fa24dbc91 100644
--- a/packages/runtime-dom/__tests__/directives/vModel.spec.ts
+++ b/packages/runtime-dom/__tests__/directives/vModel.spec.ts
@@ -48,6 +48,7 @@ describe('vModel', () => {
 
     const input = root.querySelector('input')!
     const data = root._vnode.component.data
+    expect(input.value).toEqual('')
 
     input.value = 'foo'
     triggerEvent('input', input)
@@ -57,6 +58,10 @@ describe('vModel', () => {
     data.value = 'bar'
     await nextTick()
     expect(input.value).toEqual('bar')
+
+    data.value = undefined
+    await nextTick()
+    expect(input.value).toEqual('')
   })
 
   it('should work with multiple listeners', async () => {
diff --git a/packages/runtime-dom/src/directives/vModel.ts b/packages/runtime-dom/src/directives/vModel.ts
index 34008ecc9d8..512f7686783 100644
--- a/packages/runtime-dom/src/directives/vModel.ts
+++ b/packages/runtime-dom/src/directives/vModel.ts
@@ -47,7 +47,7 @@ export const vModelText: ModelDirective<
   HTMLInputElement | HTMLTextAreaElement
 > = {
   beforeMount(el, { value, modifiers: { lazy, trim, number } }, vnode) {
-    el.value = value
+    el.value = value == null ? '' : value
     el._assign = getModelAssigner(vnode)
     const castToNumber = number || el.type === 'number'
     addEventListener(el, lazy ? 'change' : 'input', e => {
@@ -85,7 +85,7 @@ export const vModelText: ModelDirective<
         return
       }
     }
-    el.value = value
+    el.value = value == null ? '' : value
   }
 }