From 6c9ac2db32984e51638860adb12dbb73926ae366 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?=
 <sxzz@sxzz.moe>
Date: Fri, 31 Mar 2023 22:21:20 +0800
Subject: [PATCH 01/26] wip: defineModel

---
 packages/compiler-sfc/src/compileScript.ts    |  6 ++++
 packages/dts-test/setupHelpers.test-d.ts      | 25 +++++++++++++-
 packages/runtime-core/src/apiSetupHelpers.ts  | 33 +++++++++++++++++--
 packages/runtime-core/src/index.ts            |  1 +
 .../types/scriptSetupHelpers.d.ts             |  2 ++
 5 files changed, 64 insertions(+), 3 deletions(-)

diff --git a/packages/compiler-sfc/src/compileScript.ts b/packages/compiler-sfc/src/compileScript.ts
index 8d22d7e1348..d980835044f 100644
--- a/packages/compiler-sfc/src/compileScript.ts
+++ b/packages/compiler-sfc/src/compileScript.ts
@@ -151,6 +151,11 @@ type EmitsDeclType = FromNormalScript<
   TSFunctionType | TSTypeLiteral | TSInterfaceBody
 >
 
+export interface ModelDecl {
+  type: TSType
+  option: Node
+}
+
 /**
  * Compile `<script setup>`
  * It requires the whole SFC descriptor because we need to handle and merge
@@ -325,6 +330,7 @@ export function compileScript(
   let emitsTypeDecl: EmitsDeclType | undefined
   let emitIdentifier: string | undefined
   let optionsRuntimeDecl: Node | undefined
+  // let modelDeclMap: Record<string, ModelDecl> = {}
   let hasAwait = false
   let hasInlinedSsrRenderFn = false
   // props/emits declared via types
diff --git a/packages/dts-test/setupHelpers.test-d.ts b/packages/dts-test/setupHelpers.test-d.ts
index 13d80947c83..14229d168c3 100644
--- a/packages/dts-test/setupHelpers.test-d.ts
+++ b/packages/dts-test/setupHelpers.test-d.ts
@@ -6,7 +6,9 @@ import {
   withDefaults,
   Slots,
   defineSlots,
-  VNode
+  VNode,
+  WritableComputedRef,
+  defineModel
 } from 'vue'
 import { describe, expectType } from './utils'
 
@@ -202,6 +204,27 @@ describe('defineSlots', () => {
   expectType<Slots>(slotsUntype)
 })
 
+describe('defineModel', () => {
+  const modelValue = defineModel<string>()
+  expectType<WritableComputedRef<string | undefined>>(modelValue)
+  modelValue.value = 'new value'
+
+  const modelValueRequired = defineModel<boolean>({ required: true })
+  expectType<WritableComputedRef<boolean>>(modelValueRequired)
+
+  const modelValueDefault = defineModel<boolean>({ default: true })
+  expectType<WritableComputedRef<boolean>>(modelValueDefault)
+
+  const count = defineModel<number>('count')
+  expectType<WritableComputedRef<number | undefined>>(count)
+
+  const countRequired = defineModel<number>('count', { required: true })
+  expectType<WritableComputedRef<number>>(countRequired)
+
+  const countDefault = defineModel<number>('count', { default: 1 })
+  expectType<WritableComputedRef<number>>(countDefault)
+})
+
 describe('useAttrs', () => {
   const attrs = useAttrs()
   expectType<Record<string, unknown>>(attrs)
diff --git a/packages/runtime-core/src/apiSetupHelpers.ts b/packages/runtime-core/src/apiSetupHelpers.ts
index 1c60416c6ea..e5030c043d6 100644
--- a/packages/runtime-core/src/apiSetupHelpers.ts
+++ b/packages/runtime-core/src/apiSetupHelpers.ts
@@ -26,6 +26,7 @@ import {
 } from './componentProps'
 import { warn } from './warning'
 import { SlotsType, TypedSlots } from './componentSlots'
+import { WritableComputedRef } from '@vue/reactivity'
 
 // dev only
 const warnRuntimeUsage = (method: string) =>
@@ -200,11 +201,39 @@ export function defineOptions<
 
 export function defineSlots<
   S extends Record<string, any> = Record<string, any>
->(): // @ts-expect-error
-TypedSlots<SlotsType<S>> {
+>(): TypedSlots<SlotsType<S>> {
   if (__DEV__) {
     warnRuntimeUsage(`defineSlots`)
   }
+  return null as any
+}
+
+export function defineModel<T>(
+  options: { required: true } & Record<string, unknown>
+): WritableComputedRef<T>
+export function defineModel<T>(
+  options: { default: any } & Record<string, unknown>
+): WritableComputedRef<T>
+export function defineModel<T>(
+  options?: Record<string, unknown>
+): WritableComputedRef<T | undefined>
+export function defineModel<T>(
+  name: string,
+  options: { required: true } & Record<string, unknown>
+): WritableComputedRef<T>
+export function defineModel<T>(
+  name: string,
+  options: { default: any } & Record<string, unknown>
+): WritableComputedRef<T>
+export function defineModel<T>(
+  name: string,
+  options?: Record<string, unknown>
+): WritableComputedRef<T | undefined>
+export function defineModel() {
+  if (__DEV__) {
+    warnRuntimeUsage('defineModel')
+  }
+  return null as any
 }
 
 type NotUndefined<T> = T extends undefined ? never : T
diff --git a/packages/runtime-core/src/index.ts b/packages/runtime-core/src/index.ts
index 428f3683d5a..34f2eb910e5 100644
--- a/packages/runtime-core/src/index.ts
+++ b/packages/runtime-core/src/index.ts
@@ -71,6 +71,7 @@ export {
   defineExpose,
   defineOptions,
   defineSlots,
+  defineModel,
   withDefaults,
   // internal
   mergeDefaults,
diff --git a/packages/runtime-core/types/scriptSetupHelpers.d.ts b/packages/runtime-core/types/scriptSetupHelpers.d.ts
index 4ffc2f725ae..a9ba734a53d 100644
--- a/packages/runtime-core/types/scriptSetupHelpers.d.ts
+++ b/packages/runtime-core/types/scriptSetupHelpers.d.ts
@@ -5,6 +5,7 @@ type _defineEmits = typeof defineEmits
 type _defineExpose = typeof defineExpose
 type _defineOptions = typeof defineOptions
 type _defineSlots = typeof defineSlots
+type _defineModel = typeof defineModel
 type _withDefaults = typeof withDefaults
 
 declare global {
@@ -13,5 +14,6 @@ declare global {
   const defineExpose: _defineExpose
   const defineOptions: _defineOptions
   const defineSlots: _defineSlots
+  const defineModel: _defineModel
   const withDefaults: _withDefaults
 }

From 4607c2712e0c7bf817227cd3c4f0a7564268ce04 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?=
 <sxzz@sxzz.moe>
Date: Tue, 4 Apr 2023 02:31:43 +0800
Subject: [PATCH 02/26] test: disallow

---
 .../__tests__/compileScript.spec.ts           | 42 +++++++++++++++++++
 1 file changed, 42 insertions(+)

diff --git a/packages/compiler-sfc/__tests__/compileScript.spec.ts b/packages/compiler-sfc/__tests__/compileScript.spec.ts
index 7187c5d3191..8071757e3d2 100644
--- a/packages/compiler-sfc/__tests__/compileScript.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScript.spec.ts
@@ -306,6 +306,48 @@ const myEmit = defineEmits(['foo', 'bar'])
         '[@vue/compiler-sfc] defineOptions() cannot be used to declare props. Use defineProps() instead.'
       )
     })
+
+    it('should emit an error with declaring props/emits/slots/expose', () => {
+      expect(() =>
+        compile(`
+          <script setup>
+          defineOptions({ props: ['foo'] })
+          </script>
+        `)
+      ).toThrowError(
+        '[@vue/compiler-sfc] defineOptions() cannot be used to declare props. Use defineProps() instead'
+      )
+
+      expect(() =>
+        compile(`
+          <script setup>
+          defineOptions({ emits: ['update'] })
+          </script>
+        `)
+      ).toThrowError(
+        '[@vue/compiler-sfc] defineOptions() cannot be used to declare emits. Use defineEmits() instead'
+      )
+
+      expect(() =>
+        compile(`
+          <script setup>
+          defineOptions({ expose: ['foo'] })
+          </script>
+        `)
+      ).toThrowError(
+        '[@vue/compiler-sfc] defineOptions() cannot be used to declare expose. Use defineExpose() instead'
+      )
+
+      expect(() =>
+        compile(`
+          <script setup lang="ts">
+          defineOptions({ slots: Object })
+          </script>
+        `)
+      ).toThrowError(
+        '[@vue/compiler-sfc] defineOptions() cannot be used to declare slots. Use defineSlots() instead'
+      )
+    })
   })
 
   test('defineExpose()', () => {

From f72c1f26c20c57bc4d32cd351f82a7d2b12f6f2c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?=
 <sxzz@sxzz.moe>
Date: Wed, 5 Apr 2023 00:12:59 +0800
Subject: [PATCH 03/26] wip

---
 .../__snapshots__/compileScript.spec.ts.snap  |  86 +++++++
 .../__tests__/compileScript.spec.ts           | 107 ++++++++
 packages/compiler-sfc/src/compileScript.ts    | 237 +++++++++++++-----
 .../__tests__/apiSetupHelpers.spec.ts         |  44 +++-
 packages/runtime-core/src/apiSetupHelpers.ts  |  83 +++++-
 packages/runtime-core/src/index.ts            |   1 +
 packages/sfc-playground/src/App.vue           |   3 +-
 7 files changed, 491 insertions(+), 70 deletions(-)

diff --git a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
index 818ea02e303..20f78db165a 100644
--- a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
@@ -653,6 +653,48 @@ return {  }
 }"
 `;
 
+exports[`SFC compile <script setup> > defineModel() > basic usage 1`] = `
+"import { useModel as _useModel } from 'vue'
+
+export default {
+  props: {
+    \\"modelValue\\": { required: true },
+    \\"count\\": {},
+  },
+  emits: [\\"update:modelValue\\", \\"update:count\\"],
+  setup(__props, { expose: __expose }) {
+  __expose();
+
+        const modelValue = _useModel(\\"modelValue\\", { required: true })
+        const c = _useModel(\\"count\\")
+        
+return { modelValue, c }
+}
+
+}"
+`;
+
+exports[`SFC compile <script setup> > defineModel() > w/ defineProps and defineEmits 1`] = `
+"import { useModel as _useModel, mergeModels as _mergeModels } from 'vue'
+
+export default {
+  props: _mergeModels({ foo: String }, {
+    \\"modelValue\\": { default: 0 },
+  }),
+  emits: merge(['change'], [\\"update:modelValue\\"]),
+  setup(__props, { expose: __expose }) {
+  __expose();
+
+        
+        
+        const count = _useModel(\\"modelValue\\", { default: 0 })
+        
+return { count }
+}
+
+}"
+`;
+
 exports[`SFC compile <script setup> > defineOptions() > basic usage 1`] = `
 "export default /*#__PURE__*/Object.assign({ name: 'FooApp' }, {
   setup(__props, { expose: __expose }) {
@@ -1580,6 +1622,50 @@ return { emit }
 })"
 `;
 
+exports[`SFC compile <script setup> > with TypeScript > defineModel > basic usage 1`] = `
+"import { useModel as _useModel, defineComponent as _defineComponent } from 'vue'
+
+export default /*#__PURE__*/_defineComponent({
+  props: {
+    \\"modelValue\\": [Boolean, String],
+    \\"count\\": Number,
+  },
+  emits: [\\"update:modelValue\\", \\"update:count\\"],
+  setup(__props, { expose: __expose }) {
+  __expose();
+
+          const modelValue = _useModel(\\"modelValue\\")
+          const count = _useModel(\\"count\\")
+          
+return { modelValue, count }
+}
+
+})"
+`;
+
+exports[`SFC compile <script setup> > with TypeScript > defineModel > w/ production mode 1`] = `
+"import { useModel as _useModel, defineComponent as _defineComponent } from 'vue'
+
+export default /*#__PURE__*/_defineComponent({
+  props: {
+    \\"modelValue\\": Boolean,
+    \\"fn\\": Function,
+    \\"str\\": {},
+  },
+  emits: [\\"update:modelValue\\", \\"update:fn\\", \\"update:str\\"],
+  setup(__props, { expose: __expose }) {
+  __expose();
+
+          const modelValue = _useModel(\\"modelValue\\")
+          const fn = _useModel(\\"fn\\")
+          const str = _useModel(\\"str\\")
+          
+return { modelValue, fn, str }
+}
+
+})"
+`;
+
 exports[`SFC compile <script setup> > with TypeScript > defineProps w/ TS assertion 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 
diff --git a/packages/compiler-sfc/__tests__/compileScript.spec.ts b/packages/compiler-sfc/__tests__/compileScript.spec.ts
index 8071757e3d2..fe6c71dac6d 100644
--- a/packages/compiler-sfc/__tests__/compileScript.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScript.spec.ts
@@ -365,6 +365,61 @@ defineExpose({ foo: 123 })
     expect(content).toMatch(/\b__expose\(\{ foo: 123 \}\)/)
   })
 
+  describe('defineModel()', () => {
+    test('basic usage', () => {
+      const { content, bindings } = compile(
+        `
+        <script setup>
+        const modelValue = defineModel({ required: true })
+        const c = defineModel('count')
+        </script>
+        `,
+        { defineModel: true }
+      )
+      assertCode(content)
+      expect(content).toMatch('props: {\n    "modelValue": { required: true }')
+      expect(content).toMatch('"count": {},')
+      expect(content).toMatch('emits: ["update:modelValue", "update:count"],')
+      expect(content).toMatch(
+        `const modelValue = _useModel("modelValue", { required: true })`
+      )
+      expect(content).toMatch(`const c = _useModel("count")`)
+      expect(content).toMatch(`return { modelValue, c }`)
+      expect(content).not.toMatch('defineModel')
+
+      expect(bindings).toStrictEqual({
+        modelValue: BindingTypes.SETUP_REF,
+        count: BindingTypes.PROPS,
+        c: BindingTypes.SETUP_REF
+      })
+    })
+
+    test('w/ defineProps and defineEmits', () => {
+      const { content, bindings } = compile(
+        `
+        <script setup>
+        defineProps({ foo: String })
+        defineEmits(['change'])
+        const count = defineModel({ default: 0 })
+        </script>
+      `,
+        { defineModel: true }
+      )
+      assertCode(content)
+      expect(content).toMatch(`props: _mergeModels({ foo: String }`)
+      expect(content).toMatch(`"modelValue": { default: 0 }`)
+      expect(content).toMatch(
+        `const count = _useModel("modelValue", { default: 0 })`
+      )
+      expect(content).not.toMatch('defineModel')
+      expect(bindings).toStrictEqual({
+        count: BindingTypes.SETUP_REF,
+        foo: BindingTypes.PROPS,
+        modelValue: BindingTypes.PROPS
+      })
+    })
+  })
+
   test('<script> after <script setup> the script content not end with `\\n`', () => {
     const { content } = compile(`
     <script setup>
@@ -1710,6 +1765,58 @@ const emit = defineEmits(['a', 'b'])
       })
     })
 
+    describe('defineModel', () => {
+      test('basic usage', () => {
+        const { content, bindings } = compile(
+          `
+          <script setup lang="ts">
+          const modelValue = defineModel<boolean | string>()
+          const count = defineModel<number>('count')
+          </script>
+          `,
+          { defineModel: true }
+        )
+        assertCode(content)
+        expect(content).toMatch('"modelValue": [Boolean, String]')
+        expect(content).toMatch('"count": Number')
+        expect(content).toMatch('emits: ["update:modelValue", "update:count"]')
+        expect(content).toMatch(`const modelValue = _useModel("modelValue")`)
+        expect(content).toMatch(`const count = _useModel("count")`)
+        expect(bindings).toStrictEqual({
+          modelValue: BindingTypes.SETUP_REF,
+          count: BindingTypes.SETUP_REF
+        })
+      })
+
+      test('w/ production mode', () => {
+        const { content, bindings } = compile(
+          `
+          <script setup lang="ts">
+          const modelValue = defineModel<boolean>()
+          const fn = defineModel<() => void>('fn')
+          const str = defineModel<string>('str')
+          </script>
+          `,
+          { defineModel: true, isProd: true }
+        )
+        assertCode(content)
+        expect(content).toMatch('"modelValue": Boolean')
+        expect(content).toMatch('"fn": Function')
+        expect(content).toMatch('"str": {}')
+        expect(content).toMatch(
+          'emits: ["update:modelValue", "update:fn", "update:str"]'
+        )
+        expect(content).toMatch(`const modelValue = _useModel("modelValue")`)
+        expect(content).toMatch(`const fn = _useModel("fn")`)
+        expect(content).toMatch(`const str = _useModel("str")`)
+        expect(bindings).toStrictEqual({
+          modelValue: BindingTypes.SETUP_REF,
+          fn: BindingTypes.SETUP_REF,
+          str: BindingTypes.SETUP_REF
+        })
+      })
+    })
+
     test('runtime Enum', () => {
       const { content, bindings } = compile(
         `<script setup lang="ts">
diff --git a/packages/compiler-sfc/src/compileScript.ts b/packages/compiler-sfc/src/compileScript.ts
index d980835044f..5fd8c861161 100644
--- a/packages/compiler-sfc/src/compileScript.ts
+++ b/packages/compiler-sfc/src/compileScript.ts
@@ -68,6 +68,7 @@ const DEFINE_EXPOSE = 'defineExpose'
 const WITH_DEFAULTS = 'withDefaults'
 const DEFINE_OPTIONS = 'defineOptions'
 const DEFINE_SLOTS = 'defineSlots'
+const DEFINE_MODEL = 'defineModel'
 
 const isBuiltInDir = makeMap(
   `once,memo,if,for,else,else-if,slot,text,html,on,bind,model,show,cloak,is`
@@ -119,13 +120,16 @@ export interface SFCScriptCompileOptions {
    * options passed to `compiler-dom`.
    */
   templateOptions?: Partial<SFCTemplateCompileOptions>
-
   /**
    * Hoist <script setup> static constants.
    * - Only enables when one `<script setup>` exists.
    * @default true
    */
   hoistStatic?: boolean
+  /**
+   * (Experimental) Enable macro `defineModel`
+   */
+  defineModel?: boolean
 }
 
 export interface ImportBinding {
@@ -150,10 +154,10 @@ type PropsDeclType = FromNormalScript<TSTypeLiteral | TSInterfaceBody>
 type EmitsDeclType = FromNormalScript<
   TSFunctionType | TSTypeLiteral | TSInterfaceBody
 >
-
-export interface ModelDecl {
-  type: TSType
-  option: Node
+interface ModelDecl {
+  type: TSType | undefined
+  options: string | undefined
+  identifier: string | undefined
 }
 
 /**
@@ -169,6 +173,7 @@ export function compileScript(
   // feature flags
   // TODO remove in 3.4
   const enableReactivityTransform = !!options.reactivityTransform
+  const enableDefineModel = !!options.defineModel
   const isProd = !!options.isProd
   const genSourceMap = options.sourceMap !== false
   const hoistStatic = options.hoistStatic !== false && !script
@@ -319,6 +324,7 @@ export function compileScript(
   let hasDefaultExportRender = false
   let hasDefineOptionsCall = false
   let hasDefineSlotsCall = false
+  let hasDefineModelCall = false
   let propsRuntimeDecl: Node | undefined
   let propsRuntimeDefaults: Node | undefined
   let propsDestructureDecl: Node | undefined
@@ -330,7 +336,7 @@ export function compileScript(
   let emitsTypeDecl: EmitsDeclType | undefined
   let emitIdentifier: string | undefined
   let optionsRuntimeDecl: Node | undefined
-  // let modelDeclMap: Record<string, ModelDecl> = {}
+  let modelDecls: Record<string, ModelDecl> = {}
   let hasAwait = false
   let hasInlinedSsrRenderFn = false
   // props/emits declared via types
@@ -622,6 +628,54 @@ export function compileScript(
     return true
   }
 
+  function processDefineModel(node: Node, declId?: LVal): boolean {
+    if (!enableDefineModel || !isCallOf(node, DEFINE_MODEL)) {
+      return false
+    }
+    hasDefineModelCall = true
+
+    const type =
+      (node.typeParameters && node.typeParameters.params[0]) || undefined
+    let modelName: string
+    let options: Node | undefined
+    const arg0 = node.arguments[0] && unwrapTSNode(node.arguments[0])
+    if (arg0 && arg0.type === 'StringLiteral') {
+      modelName = arg0.value
+      options = node.arguments[1]
+    } else {
+      modelName = 'modelValue'
+      options = arg0
+    }
+
+    if (modelDecls[modelName]) {
+      error(`duplicate model name ${JSON.stringify(modelName)}`, node)
+    }
+
+    modelDecls[modelName] = {
+      type,
+      options: options
+        ? s.slice(startOffset + options.start!, startOffset + options.end!)
+        : undefined,
+      identifier:
+        declId && declId.type === 'Identifier' ? declId.name : undefined
+    }
+
+    s.overwrite(
+      startOffset + node.start!,
+      startOffset + node.end!,
+      `${helper('useModel')}(${JSON.stringify(modelName)}${
+        options
+          ? `, ${s.slice(
+              startOffset + options.start!,
+              startOffset + options.end!
+            )}`
+          : ''
+      })`
+    )
+
+    return true
+  }
+
   function getAstBody(): Statement[] {
     return scriptAst
       ? [...scriptSetupAst.body, ...scriptAst.body]
@@ -889,18 +943,22 @@ export function compileScript(
     )
   }
 
-  function genRuntimeProps(props: Record<string, PropTypeData>) {
-    const keys = Object.keys(props)
-    if (!keys.length) {
-      return ``
-    }
-    const hasStaticDefaults = hasStaticWithDefaults()
-    const scriptSetupSource = scriptSetup!.content
-    let propsDecls = `{
+  function genRuntimeProps() {
+    function genPropsFromTS() {
+      const keys = Object.keys(typeDeclaredProps)
+      if (!keys.length) {
+        return
+      }
+      const hasStaticDefaults = hasStaticWithDefaults()
+      const scriptSetupSource = scriptSetup!.content
+      let propsDecls = `{
     ${keys
       .map(key => {
         let defaultString: string | undefined
-        const destructured = genDestructuredDefaultValue(key, props[key].type)
+        const destructured = genDestructuredDefaultValue(
+          key,
+          typeDeclaredProps[key].type
+        )
         if (destructured) {
           defaultString = `default: ${destructured.valueString}${
             destructured.needSkipFactory ? `, skipFactory: true` : ``
@@ -930,7 +988,7 @@ export function compileScript(
           }
         }
 
-        const { type, required, skipCheck } = props[key]
+        const { type, required, skipCheck } = typeDeclaredProps[key]
         if (!isProd) {
           return `${key}: { type: ${toRuntimeTypeString(
             type
@@ -957,14 +1015,79 @@ export function compileScript(
       })
       .join(',\n    ')}\n  }`
 
-    if (propsRuntimeDefaults && !hasStaticDefaults) {
-      propsDecls = `${helper('mergeDefaults')}(${propsDecls}, ${source.slice(
-        propsRuntimeDefaults.start! + startOffset,
-        propsRuntimeDefaults.end! + startOffset
-      )})`
+      if (propsRuntimeDefaults && !hasStaticDefaults) {
+        propsDecls = `${helper('mergeDefaults')}(${propsDecls}, ${source.slice(
+          propsRuntimeDefaults.start! + startOffset,
+          propsRuntimeDefaults.end! + startOffset
+        )})`
+      }
+
+      return propsDecls
     }
 
-    return `\n  props: ${propsDecls},`
+    function genModels() {
+      if (!hasDefineModelCall) return
+
+      let modelPropsDecl = ''
+      for (const [name, { type, options }] of Object.entries(modelDecls)) {
+        let runtimeTypes = type && inferRuntimeType(type, declaredTypes)
+        if (runtimeTypes && isProd) {
+          runtimeTypes = runtimeTypes.filter(
+            el => el === 'Boolean' || el === 'Function'
+          )
+        }
+        const runtimeType =
+          (runtimeTypes &&
+            runtimeTypes.length > 0 &&
+            toRuntimeTypeString(runtimeTypes)) ||
+          undefined
+
+        let decl: string
+        if (runtimeType && options) {
+          decl = isTS
+            ? `{ type: ${runtimeType}, ...${options} }`
+            : `Object.assign({ type: ${runtimeType} }, ${options})`
+        } else {
+          decl = runtimeType || options || '{}'
+        }
+        modelPropsDecl += `\n    ${JSON.stringify(name)}: ${decl},`
+      }
+      return `{${modelPropsDecl}\n  }`
+    }
+
+    let propsDecls: undefined | string
+    if (propsRuntimeDecl) {
+      propsDecls = scriptSetup!.content
+        .slice(propsRuntimeDecl.start!, propsRuntimeDecl.end!)
+        .trim()
+      if (propsDestructureDecl) {
+        const defaults: string[] = []
+        for (const key in propsDestructuredBindings) {
+          const d = genDestructuredDefaultValue(key)
+          if (d)
+            defaults.push(
+              `${key}: ${d.valueString}${
+                d.needSkipFactory ? `, __skip_${key}: true` : ``
+              }`
+            )
+        }
+        if (defaults.length) {
+          propsDecls = `${helper(
+            `mergeDefaults`
+          )}(${propsDecls}, {\n  ${defaults.join(',\n  ')}\n})`
+        }
+      }
+    } else if (propsTypeDecl) {
+      propsDecls = genPropsFromTS()
+    }
+
+    const modelsDecls = genModels()
+
+    if (propsDecls && modelsDecls) {
+      return `${helper('mergeModels')}(${propsDecls}, ${modelsDecls})`
+    } else {
+      return modelsDecls || propsDecls
+    }
   }
 
   function genDestructuredDefaultValue(
@@ -1328,7 +1451,8 @@ export function compileScript(
         processDefineEmits(expr) ||
         processDefineOptions(expr) ||
         processWithDefaults(expr) ||
-        processDefineSlots(expr)
+        processDefineSlots(expr) ||
+        processDefineModel(expr)
       ) {
         s.remove(node.start! + startOffset, node.end! + startOffset)
       } else if (processDefineExpose(expr)) {
@@ -1364,7 +1488,9 @@ export function compileScript(
             processWithDefaults(init, decl.id)
           const isDefineEmits =
             !isDefineProps && processDefineEmits(init, decl.id)
-          !isDefineEmits && processDefineSlots(init, decl.id)
+          !isDefineEmits &&
+            (processDefineSlots(init, decl.id) ||
+              processDefineModel(init, decl.id))
 
           if (isDefineProps || isDefineEmits) {
             if (left === 1) {
@@ -1557,6 +1683,9 @@ export function compileScript(
   for (const key in typeDeclaredProps) {
     bindingMetadata[key] = BindingTypes.PROPS
   }
+  for (const key in modelDecls) {
+    bindingMetadata[key] = BindingTypes.PROPS
+  }
   // props aliases
   if (propsDestructureDecl) {
     if (propsDestructureRestId) {
@@ -1775,38 +1904,27 @@ export function compileScript(
   if (hasInlinedSsrRenderFn) {
     runtimeOptions += `\n  __ssrInlineRender: true,`
   }
-  if (propsRuntimeDecl) {
-    let declCode = scriptSetup.content
-      .slice(propsRuntimeDecl.start!, propsRuntimeDecl.end!)
-      .trim()
-    if (propsDestructureDecl) {
-      const defaults: string[] = []
-      for (const key in propsDestructuredBindings) {
-        const d = genDestructuredDefaultValue(key)
-        if (d)
-          defaults.push(
-            `${key}: ${d.valueString}${
-              d.needSkipFactory ? `, __skip_${key}: true` : ``
-            }`
-          )
-      }
-      if (defaults.length) {
-        declCode = `${helper(
-          `mergeDefaults`
-        )}(${declCode}, {\n  ${defaults.join(',\n  ')}\n})`
-      }
-    }
-    runtimeOptions += `\n  props: ${declCode},`
-  } else if (propsTypeDecl) {
-    runtimeOptions += genRuntimeProps(typeDeclaredProps)
-  }
+
+  let propsDecl = genRuntimeProps()
+  if (propsDecl) runtimeOptions += `\n  props: ${propsDecl},`
+
+  let emitsDecl = ''
   if (emitsRuntimeDecl) {
-    runtimeOptions += `\n  emits: ${scriptSetup.content
+    emitsDecl = scriptSetup.content
       .slice(emitsRuntimeDecl.start!, emitsRuntimeDecl.end!)
-      .trim()},`
+      .trim()
   } else if (emitsTypeDecl) {
-    runtimeOptions += genRuntimeEmits(typeDeclaredEmits)
+    emitsDecl = genRuntimeEmits(typeDeclaredEmits)
+  }
+  if (hasDefineModelCall) {
+    let modelEmitsDecl = stringifyStringArray(
+      Object.keys(modelDecls).map(n => `update:${n}`)
+    )
+    emitsDecl = emitsDecl
+      ? `merge(${emitsDecl}, ${modelEmitsDecl})`
+      : modelEmitsDecl
   }
+  if (emitsDecl) runtimeOptions += `\n  emits: ${emitsDecl},`
 
   let definedOptions = ''
   if (optionsRuntimeDecl) {
@@ -1941,7 +2059,10 @@ function walkDeclaration(
             ? BindingTypes.SETUP_REACTIVE_CONST
             : BindingTypes.SETUP_CONST
         } else if (isConst) {
-          if (isCallOf(init, userImportAliases['ref'])) {
+          if (
+            isCallOf(init, userImportAliases['ref']) ||
+            isCallOf(init, DEFINE_MODEL)
+          ) {
             bindingType = BindingTypes.SETUP_REF
           } else {
             bindingType = BindingTypes.SETUP_MAYBE_REF
@@ -2372,12 +2493,12 @@ function extractEventNames(
   }
 }
 
+function stringifyStringArray(strs: string[]) {
+  return `[${strs.map(s => JSON.stringify(s)).join(', ')}]`
+}
+
 function genRuntimeEmits(emits: Set<string>) {
-  return emits.size
-    ? `\n  emits: [${Array.from(emits)
-        .map(p => JSON.stringify(p))
-        .join(', ')}],`
-    : ``
+  return emits.size ? stringifyStringArray(Array.from(emits)) : ``
 }
 
 function canNeverBeRef(node: Node, userReactiveImport?: string): boolean {
diff --git a/packages/runtime-core/__tests__/apiSetupHelpers.spec.ts b/packages/runtime-core/__tests__/apiSetupHelpers.spec.ts
index 65fb325f044..f69c3703e93 100644
--- a/packages/runtime-core/__tests__/apiSetupHelpers.spec.ts
+++ b/packages/runtime-core/__tests__/apiSetupHelpers.spec.ts
@@ -24,7 +24,8 @@ import {
   useSlots,
   mergeDefaults,
   withAsyncContext,
-  createPropsRestProxy
+  createPropsRestProxy,
+  mergeModelsOptions
 } from '../src/apiSetupHelpers'
 
 describe('SFC <script setup> helpers', () => {
@@ -133,6 +134,47 @@ describe('SFC <script setup> helpers', () => {
     })
   })
 
+  describe('mergeModelsOptions', () => {
+    test('array syntax', () => {
+      expect(mergeModelsOptions(['foo', 'bar'], ['baz'])).toMatchObject([
+        'foo',
+        'bar',
+        'baz'
+      ])
+    })
+
+    test('object syntax', () => {
+      expect(
+        mergeModelsOptions({ foo: null, bar: { required: true } }, ['baz'])
+      ).toMatchObject({
+        foo: null,
+        bar: { required: true },
+        baz: {}
+      })
+
+      expect(
+        mergeModelsOptions(['baz'], { foo: null, bar: { required: true } })
+      ).toMatchObject({
+        foo: null,
+        bar: { required: true },
+        baz: {}
+      })
+    })
+
+    test('overwrite', () => {
+      expect(
+        mergeModelsOptions(
+          { foo: null, bar: { required: true } },
+          { bar: {}, baz: {} }
+        )
+      ).toMatchObject({
+        foo: null,
+        bar: {},
+        baz: {}
+      })
+    })
+  })
+
   test('createPropsRestProxy', () => {
     const original = shallowReactive({
       foo: 1,
diff --git a/packages/runtime-core/src/apiSetupHelpers.ts b/packages/runtime-core/src/apiSetupHelpers.ts
index e5030c043d6..b402b782aa8 100644
--- a/packages/runtime-core/src/apiSetupHelpers.ts
+++ b/packages/runtime-core/src/apiSetupHelpers.ts
@@ -12,7 +12,7 @@ import {
   createSetupContext,
   unsetCurrentInstance
 } from './component'
-import { EmitFn, EmitsOptions } from './componentEmits'
+import { EmitFn, EmitsOptions, ObjectEmitsOptions } from './componentEmits'
 import {
   ComponentOptionsMixin,
   ComponentOptionsWithoutProps,
@@ -26,7 +26,8 @@ import {
 } from './componentProps'
 import { warn } from './warning'
 import { SlotsType, TypedSlots } from './componentSlots'
-import { WritableComputedRef } from '@vue/reactivity'
+import { WritableComputedRef, computed, ref } from '@vue/reactivity'
+import { watch } from './apiWatch'
 
 // dev only
 const warnRuntimeUsage = (method: string) =>
@@ -229,11 +230,10 @@ export function defineModel<T>(
   name: string,
   options?: Record<string, unknown>
 ): WritableComputedRef<T | undefined>
-export function defineModel() {
+export function defineModel(): any {
   if (__DEV__) {
     warnRuntimeUsage('defineModel')
   }
-  return null as any
 }
 
 type NotUndefined<T> = T extends undefined ? never : T
@@ -297,6 +297,51 @@ export function useAttrs(): SetupContext['attrs'] {
   return getContext().attrs
 }
 
+export function useModel<T>(
+  name: string,
+  options: {
+    passive?: boolean
+    deep?: boolean
+  } = {}
+): WritableComputedRef<T> {
+  const { passive, deep } = options
+  const i = getCurrentInstance()!
+  if (__DEV__ && !i) {
+    warn(`useModel() called without active instance.`)
+    return null as any
+  }
+
+  if (passive) {
+    const proxy = ref<any>(i.props[name])
+
+    watch(
+      () => i.props[name],
+      v => (proxy.value = v)
+    )
+
+    watch(
+      proxy,
+      value => {
+        if (value !== i.props[name] || deep) {
+          i.emit(`update:${name}`, value)
+        }
+      },
+      { deep }
+    )
+
+    return proxy
+  } else {
+    return computed<any>({
+      get() {
+        return i.props[name]
+      },
+      set(value) {
+        i.emit(`update:${name}`, value)
+      }
+    })
+  }
+}
+
 function getContext(): SetupContext {
   const i = getCurrentInstance()!
   if (__DEV__ && !i) {
@@ -305,6 +350,15 @@ function getContext(): SetupContext {
   return i.setupContext || (i.setupContext = createSetupContext(i))
 }
 
+function normalizePropsOrEmits(props: ComponentPropsOptions | EmitsOptions) {
+  return isArray(props)
+    ? props.reduce(
+        (normalized, p) => ((normalized[p] = {}), normalized),
+        {} as ComponentObjectPropsOptions | ObjectEmitsOptions
+      )
+    : props
+}
+
 /**
  * Runtime helper for merging default declarations. Imported by compiled code
  * only.
@@ -314,12 +368,7 @@ export function mergeDefaults(
   raw: ComponentPropsOptions,
   defaults: Record<string, any>
 ): ComponentObjectPropsOptions {
-  const props = isArray(raw)
-    ? raw.reduce(
-        (normalized, p) => ((normalized[p] = {}), normalized),
-        {} as ComponentObjectPropsOptions
-      )
-    : raw
+  const props = normalizePropsOrEmits(raw)
   for (const key in defaults) {
     if (key.startsWith('__skip')) continue
     let opt = props[key]
@@ -341,6 +390,20 @@ export function mergeDefaults(
   return props
 }
 
+/**
+ * Runtime helper for merging model declarations. Imported by compiled code
+ * only.
+ * @internal
+ */
+export function mergeModelsOptions(
+  a: ComponentPropsOptions | EmitsOptions,
+  b: ComponentPropsOptions | EmitsOptions
+) {
+  if (!a || !b) return a || b
+  if (isArray(a) && isArray(b)) return a.concat(b)
+  return Object.assign({}, normalizePropsOrEmits(a), normalizePropsOrEmits(b))
+}
+
 /**
  * Used to create a proxy for the rest element when destructuring props with
  * defineProps().
diff --git a/packages/runtime-core/src/index.ts b/packages/runtime-core/src/index.ts
index 34f2eb910e5..c54f0fac99e 100644
--- a/packages/runtime-core/src/index.ts
+++ b/packages/runtime-core/src/index.ts
@@ -75,6 +75,7 @@ export {
   withDefaults,
   // internal
   mergeDefaults,
+  mergeModelsOptions,
   createPropsRestProxy,
   withAsyncContext
 } from './apiSetupHelpers'
diff --git a/packages/sfc-playground/src/App.vue b/packages/sfc-playground/src/App.vue
index ef6481cb98b..1bba8d6f2ae 100644
--- a/packages/sfc-playground/src/App.vue
+++ b/packages/sfc-playground/src/App.vue
@@ -37,7 +37,8 @@ const sfcOptions = {
   script: {
     inlineTemplate: !useDevMode.value,
     isProd: !useDevMode.value,
-    reactivityTransform: true
+    reactivityTransform: true,
+    defineModel: true
   },
   style: {
     isProd: !useDevMode.value

From c3aa008ab7c608d23df19f15f454dbe05152f46e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?=
 <sxzz@sxzz.moe>
Date: Thu, 6 Apr 2023 00:53:00 +0800
Subject: [PATCH 04/26] feat: done

---
 .../__snapshots__/compileScript.spec.ts.snap  | 30 +++++-----
 .../__tests__/compileScript.spec.ts           | 42 +++++++++-----
 packages/compiler-sfc/src/compileScript.ts    | 58 ++++++++++---------
 packages/dts-test/setupHelpers.test-d.ts      | 20 ++++---
 packages/runtime-core/src/apiSetupHelpers.ts  | 52 +++++++----------
 packages/runtime-core/src/index.ts            |  1 +
 6 files changed, 110 insertions(+), 93 deletions(-)

diff --git a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
index 20f78db165a..515574a5ada 100644
--- a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
@@ -658,14 +658,14 @@ exports[`SFC compile <script setup> > defineModel() > basic usage 1`] = `
 
 export default {
   props: {
-    \\"modelValue\\": { required: true },
-    \\"count\\": {},
+    \\"modelValue\\": Object.assign({ required: true }, { required: true }),
+    \\"count\\": { required: true },
   },
   emits: [\\"update:modelValue\\", \\"update:count\\"],
   setup(__props, { expose: __expose }) {
   __expose();
 
-        const modelValue = _useModel(\\"modelValue\\", { required: true })
+        const modelValue = _useModel(\\"modelValue\\")
         const c = _useModel(\\"count\\")
         
 return { modelValue, c }
@@ -679,15 +679,15 @@ exports[`SFC compile <script setup> > defineModel() > w/ defineProps and defineE
 
 export default {
   props: _mergeModels({ foo: String }, {
-    \\"modelValue\\": { default: 0 },
+    \\"modelValue\\": Object.assign({ required: true }, { default: 0 }),
   }),
-  emits: merge(['change'], [\\"update:modelValue\\"]),
+  emits: _mergeModels(['change'], [\\"update:modelValue\\"]),
   setup(__props, { expose: __expose }) {
   __expose();
 
         
         
-        const count = _useModel(\\"modelValue\\", { default: 0 })
+        const count = _useModel(\\"modelValue\\")
         
 return { count }
 }
@@ -1627,17 +1627,19 @@ exports[`SFC compile <script setup> > with TypeScript > defineModel > basic usag
 
 export default /*#__PURE__*/_defineComponent({
   props: {
-    \\"modelValue\\": [Boolean, String],
-    \\"count\\": Number,
+    \\"modelValue\\": { type: [Boolean, String], required: true },
+    \\"count\\": { type: Number, required: true },
+    \\"disabled\\": { type: Number, required: true, ...{ required: false } },
   },
-  emits: [\\"update:modelValue\\", \\"update:count\\"],
+  emits: [\\"update:modelValue\\", \\"update:count\\", \\"update:disabled\\"],
   setup(__props, { expose: __expose }) {
   __expose();
 
           const modelValue = _useModel(\\"modelValue\\")
           const count = _useModel(\\"count\\")
+          const disabled = _useModel(\\"disabled\\")
           
-return { modelValue, count }
+return { modelValue, count, disabled }
 }
 
 })"
@@ -1650,17 +1652,19 @@ export default /*#__PURE__*/_defineComponent({
   props: {
     \\"modelValue\\": Boolean,
     \\"fn\\": Function,
-    \\"str\\": {},
+    \\"str\\": {  },
+    \\"optional\\": { required: false },
   },
-  emits: [\\"update:modelValue\\", \\"update:fn\\", \\"update:str\\"],
+  emits: [\\"update:modelValue\\", \\"update:fn\\", \\"update:str\\", \\"update:optional\\"],
   setup(__props, { expose: __expose }) {
   __expose();
 
           const modelValue = _useModel(\\"modelValue\\")
           const fn = _useModel(\\"fn\\")
           const str = _useModel(\\"str\\")
+          const optional = _useModel(\\"optional\\")
           
-return { modelValue, fn, str }
+return { modelValue, fn, str, optional }
 }
 
 })"
diff --git a/packages/compiler-sfc/__tests__/compileScript.spec.ts b/packages/compiler-sfc/__tests__/compileScript.spec.ts
index fe6c71dac6d..94568f63ceb 100644
--- a/packages/compiler-sfc/__tests__/compileScript.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScript.spec.ts
@@ -377,12 +377,12 @@ defineExpose({ foo: 123 })
         { defineModel: true }
       )
       assertCode(content)
-      expect(content).toMatch('props: {\n    "modelValue": { required: true }')
-      expect(content).toMatch('"count": {},')
-      expect(content).toMatch('emits: ["update:modelValue", "update:count"],')
       expect(content).toMatch(
-        `const modelValue = _useModel("modelValue", { required: true })`
+        '"modelValue": Object.assign({ required: true }, { required: true }),'
       )
+      expect(content).toMatch('"count": { required: true },')
+      expect(content).toMatch('emits: ["update:modelValue", "update:count"],')
+      expect(content).toMatch(`const modelValue = _useModel("modelValue")`)
       expect(content).toMatch(`const c = _useModel("count")`)
       expect(content).toMatch(`return { modelValue, c }`)
       expect(content).not.toMatch('defineModel')
@@ -407,10 +407,10 @@ defineExpose({ foo: 123 })
       )
       assertCode(content)
       expect(content).toMatch(`props: _mergeModels({ foo: String }`)
-      expect(content).toMatch(`"modelValue": { default: 0 }`)
       expect(content).toMatch(
-        `const count = _useModel("modelValue", { default: 0 })`
+        `"modelValue": Object.assign({ required: true }, { default: 0 })`
       )
+      expect(content).toMatch(`const count = _useModel("modelValue")`)
       expect(content).not.toMatch('defineModel')
       expect(bindings).toStrictEqual({
         count: BindingTypes.SETUP_REF,
@@ -1772,19 +1772,32 @@ const emit = defineEmits(['a', 'b'])
           <script setup lang="ts">
           const modelValue = defineModel<boolean | string>()
           const count = defineModel<number>('count')
+          const disabled = defineModel<number>('disabled', { required: false })
           </script>
           `,
           { defineModel: true }
         )
         assertCode(content)
-        expect(content).toMatch('"modelValue": [Boolean, String]')
-        expect(content).toMatch('"count": Number')
-        expect(content).toMatch('emits: ["update:modelValue", "update:count"]')
+        expect(content).toMatch(
+          '"modelValue": { type: [Boolean, String], required: true }'
+        )
+        expect(content).toMatch('"count": { type: Number, required: true }')
+        expect(content).toMatch(
+          '"disabled": { type: Number, required: true, ...{ required: false } },'
+        )
+        expect(content).toMatch(
+          'emits: ["update:modelValue", "update:count", "update:disabled"]'
+        )
+
         expect(content).toMatch(`const modelValue = _useModel("modelValue")`)
+        expect(content).toMatch(`const count = _useModel("count")`)
+        expect(content).toMatch(`const disabled = _useModel("disabled")`)
+
         expect(content).toMatch(`const count = _useModel("count")`)
         expect(bindings).toStrictEqual({
           modelValue: BindingTypes.SETUP_REF,
-          count: BindingTypes.SETUP_REF
+          count: BindingTypes.SETUP_REF,
+          disabled: BindingTypes.SETUP_REF
         })
       })
 
@@ -1795,6 +1808,7 @@ const emit = defineEmits(['a', 'b'])
           const modelValue = defineModel<boolean>()
           const fn = defineModel<() => void>('fn')
           const str = defineModel<string>('str')
+          const optional = defineModel<string>('optional', { required: false })
           </script>
           `,
           { defineModel: true, isProd: true }
@@ -1802,9 +1816,10 @@ const emit = defineEmits(['a', 'b'])
         assertCode(content)
         expect(content).toMatch('"modelValue": Boolean')
         expect(content).toMatch('"fn": Function')
-        expect(content).toMatch('"str": {}')
+        expect(content).toMatch('"str": {  }')
+        expect(content).toMatch('"optional": { required: false }')
         expect(content).toMatch(
-          'emits: ["update:modelValue", "update:fn", "update:str"]'
+          'emits: ["update:modelValue", "update:fn", "update:str", "update:optional"]'
         )
         expect(content).toMatch(`const modelValue = _useModel("modelValue")`)
         expect(content).toMatch(`const fn = _useModel("fn")`)
@@ -1812,7 +1827,8 @@ const emit = defineEmits(['a', 'b'])
         expect(bindings).toStrictEqual({
           modelValue: BindingTypes.SETUP_REF,
           fn: BindingTypes.SETUP_REF,
-          str: BindingTypes.SETUP_REF
+          str: BindingTypes.SETUP_REF,
+          optional: BindingTypes.SETUP_REF
         })
       })
     })
diff --git a/packages/compiler-sfc/src/compileScript.ts b/packages/compiler-sfc/src/compileScript.ts
index 5fd8c861161..aaf71350f89 100644
--- a/packages/compiler-sfc/src/compileScript.ts
+++ b/packages/compiler-sfc/src/compileScript.ts
@@ -663,14 +663,7 @@ export function compileScript(
     s.overwrite(
       startOffset + node.start!,
       startOffset + node.end!,
-      `${helper('useModel')}(${JSON.stringify(modelName)}${
-        options
-          ? `, ${s.slice(
-              startOffset + options.start!,
-              startOffset + options.end!
-            )}`
-          : ''
-      })`
+      `${helper('useModel')}(${JSON.stringify(modelName)})`
     )
 
     return true
@@ -946,9 +939,8 @@ export function compileScript(
   function genRuntimeProps() {
     function genPropsFromTS() {
       const keys = Object.keys(typeDeclaredProps)
-      if (!keys.length) {
-        return
-      }
+      if (!keys.length) return
+
       const hasStaticDefaults = hasStaticWithDefaults()
       const scriptSetupSource = scriptSetup!.content
       let propsDecls = `{
@@ -1043,13 +1035,24 @@ export function compileScript(
           undefined
 
         let decl: string
-        if (runtimeType && options) {
-          decl = isTS
-            ? `{ type: ${runtimeType}, ...${options} }`
-            : `Object.assign({ type: ${runtimeType} }, ${options})`
+
+        if (runtimeType && isProd && !options) {
+          decl = runtimeType
         } else {
-          decl = runtimeType || options || '{}'
+          const defaultOptions: string[] = []
+          if (runtimeType) defaultOptions.push(`type: ${runtimeType}`)
+          if (!isProd) defaultOptions.push('required: true')
+          decl = defaultOptions.join(', ')
+
+          if (decl && options) {
+            decl = isTS
+              ? `{ ${decl}, ...${options} }`
+              : `Object.assign({ ${decl} }, ${options})`
+          } else {
+            decl = options || `{ ${decl} }`
+          }
         }
+
         modelPropsDecl += `\n    ${JSON.stringify(name)}: ${decl},`
       }
       return `{${modelPropsDecl}\n  }`
@@ -1451,8 +1454,7 @@ export function compileScript(
         processDefineEmits(expr) ||
         processDefineOptions(expr) ||
         processWithDefaults(expr) ||
-        processDefineSlots(expr) ||
-        processDefineModel(expr)
+        processDefineSlots(expr)
       ) {
         s.remove(node.start! + startOffset, node.end! + startOffset)
       } else if (processDefineExpose(expr)) {
@@ -1463,6 +1465,8 @@ export function compileScript(
           callee.end! + startOffset,
           '__expose'
         )
+      } else {
+        processDefineModel(expr)
       }
     }
 
@@ -1917,11 +1921,11 @@ export function compileScript(
     emitsDecl = genRuntimeEmits(typeDeclaredEmits)
   }
   if (hasDefineModelCall) {
-    let modelEmitsDecl = stringifyStringArray(
-      Object.keys(modelDecls).map(n => `update:${n}`)
-    )
+    let modelEmitsDecl = `[${Object.keys(modelDecls)
+      .map(n => JSON.stringify(`update:${n}`))
+      .join(', ')}]`
     emitsDecl = emitsDecl
-      ? `merge(${emitsDecl}, ${modelEmitsDecl})`
+      ? `${helper('mergeModels')}(${emitsDecl}, ${modelEmitsDecl})`
       : modelEmitsDecl
   }
   if (emitsDecl) runtimeOptions += `\n  emits: ${emitsDecl},`
@@ -2493,12 +2497,12 @@ function extractEventNames(
   }
 }
 
-function stringifyStringArray(strs: string[]) {
-  return `[${strs.map(s => JSON.stringify(s)).join(', ')}]`
-}
-
 function genRuntimeEmits(emits: Set<string>) {
-  return emits.size ? stringifyStringArray(Array.from(emits)) : ``
+  return emits.size
+    ? `[${Array.from(emits)
+        .map(k => JSON.stringify(k))
+        .join(', ')}]`
+    : ``
 }
 
 function canNeverBeRef(node: Node, userReactiveImport?: string): boolean {
diff --git a/packages/dts-test/setupHelpers.test-d.ts b/packages/dts-test/setupHelpers.test-d.ts
index 14229d168c3..3eb258df050 100644
--- a/packages/dts-test/setupHelpers.test-d.ts
+++ b/packages/dts-test/setupHelpers.test-d.ts
@@ -205,21 +205,25 @@ describe('defineSlots', () => {
 })
 
 describe('defineModel', () => {
+  // overload 1
+  const modelValueRequired = defineModel<boolean>({ required: false })
+  expectType<WritableComputedRef<boolean | undefined>>(modelValueRequired)
+
+  // overload 2
   const modelValue = defineModel<string>()
-  expectType<WritableComputedRef<string | undefined>>(modelValue)
+  expectType<WritableComputedRef<string>>(modelValue)
   modelValue.value = 'new value'
 
-  const modelValueRequired = defineModel<boolean>({ required: true })
-  expectType<WritableComputedRef<boolean>>(modelValueRequired)
-
   const modelValueDefault = defineModel<boolean>({ default: true })
   expectType<WritableComputedRef<boolean>>(modelValueDefault)
 
-  const count = defineModel<number>('count')
-  expectType<WritableComputedRef<number | undefined>>(count)
+  // overload 3
+  const countRequired = defineModel<number>('count', { required: false })
+  expectType<WritableComputedRef<number | undefined>>(countRequired)
 
-  const countRequired = defineModel<number>('count', { required: true })
-  expectType<WritableComputedRef<number>>(countRequired)
+  // overload 4
+  const count = defineModel<number>('count')
+  expectType<WritableComputedRef<number>>(count)
 
   const countDefault = defineModel<number>('count', { default: 1 })
   expectType<WritableComputedRef<number>>(countDefault)
diff --git a/packages/runtime-core/src/apiSetupHelpers.ts b/packages/runtime-core/src/apiSetupHelpers.ts
index b402b782aa8..6122be8a935 100644
--- a/packages/runtime-core/src/apiSetupHelpers.ts
+++ b/packages/runtime-core/src/apiSetupHelpers.ts
@@ -3,7 +3,8 @@ import {
   isPromise,
   isFunction,
   Prettify,
-  UnionToIntersection
+  UnionToIntersection,
+  isObject
 } from '@vue/shared'
 import {
   getCurrentInstance,
@@ -22,7 +23,8 @@ import {
 import {
   ComponentPropsOptions,
   ComponentObjectPropsOptions,
-  ExtractPropTypes
+  ExtractPropTypes,
+  NormalizedProps
 } from './componentProps'
 import { warn } from './warning'
 import { SlotsType, TypedSlots } from './componentSlots'
@@ -210,26 +212,19 @@ export function defineSlots<
 }
 
 export function defineModel<T>(
-  options: { required: true } & Record<string, unknown>
-): WritableComputedRef<T>
-export function defineModel<T>(
-  options: { default: any } & Record<string, unknown>
-): WritableComputedRef<T>
-export function defineModel<T>(
-  options?: Record<string, unknown>
+  options: { required: false } & Record<string, unknown>
 ): WritableComputedRef<T | undefined>
 export function defineModel<T>(
-  name: string,
-  options: { required: true } & Record<string, unknown>
+  options?: Record<string, unknown>
 ): WritableComputedRef<T>
 export function defineModel<T>(
   name: string,
-  options: { default: any } & Record<string, unknown>
-): WritableComputedRef<T>
+  options: { required: false } & Record<string, unknown>
+): WritableComputedRef<T | undefined>
 export function defineModel<T>(
   name: string,
   options?: Record<string, unknown>
-): WritableComputedRef<T | undefined>
+): WritableComputedRef<T>
 export function defineModel(): any {
   if (__DEV__) {
     warnRuntimeUsage('defineModel')
@@ -297,21 +292,18 @@ export function useAttrs(): SetupContext['attrs'] {
   return getContext().attrs
 }
 
-export function useModel<T>(
-  name: string,
-  options: {
-    passive?: boolean
-    deep?: boolean
-  } = {}
-): WritableComputedRef<T> {
-  const { passive, deep } = options
+export function useModel<T>(name: string): WritableComputedRef<T> {
   const i = getCurrentInstance()!
   if (__DEV__ && !i) {
     warn(`useModel() called without active instance.`)
     return null as any
   }
 
-  if (passive) {
+  const options = (i.propsOptions[0] as NormalizedProps)[name]
+  if (
+    isObject(options) &&
+    (options.required === false || 'default' in options)
+  ) {
     const proxy = ref<any>(i.props[name])
 
     watch(
@@ -319,15 +311,11 @@ export function useModel<T>(
       v => (proxy.value = v)
     )
 
-    watch(
-      proxy,
-      value => {
-        if (value !== i.props[name] || deep) {
-          i.emit(`update:${name}`, value)
-        }
-      },
-      { deep }
-    )
+    watch(proxy, value => {
+      if (value !== i.props[name]) {
+        i.emit(`update:${name}`, value)
+      }
+    })
 
     return proxy
   } else {
diff --git a/packages/runtime-core/src/index.ts b/packages/runtime-core/src/index.ts
index c54f0fac99e..2001706057b 100644
--- a/packages/runtime-core/src/index.ts
+++ b/packages/runtime-core/src/index.ts
@@ -73,6 +73,7 @@ export {
   defineSlots,
   defineModel,
   withDefaults,
+  useModel,
   // internal
   mergeDefaults,
   mergeModelsOptions,

From 2f66129bd63581791e172e067a9c158cf7959c52 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?=
 <sxzz@sxzz.moe>
Date: Thu, 6 Apr 2023 01:43:48 +0800
Subject: [PATCH 05/26] test: add case

---
 .../__snapshots__/compileScript.spec.ts.snap  | 24 +++++++++++++++++--
 .../__tests__/compileScript.spec.ts           | 24 ++++++++++++++++++-
 2 files changed, 45 insertions(+), 3 deletions(-)

diff --git a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
index 515574a5ada..eb211fd72ce 100644
--- a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
@@ -674,6 +674,26 @@ return { modelValue, c }
 }"
 `;
 
+exports[`SFC compile <script setup> > defineModel() > w/ array props 1`] = `
+"import { useModel as _useModel, mergeModels as _mergeModels } from 'vue'
+
+export default {
+  props: _mergeModels(['foo', 'bar'], {
+    \\"count\\": { required: true },
+  }),
+  emits: [\\"update:count\\"],
+  setup(__props, { expose: __expose }) {
+  __expose();
+
+        
+        const count = _useModel(\\"count\\")
+        
+return { count }
+}
+
+}"
+`;
+
 exports[`SFC compile <script setup> > defineModel() > w/ defineProps and defineEmits 1`] = `
 "import { useModel as _useModel, mergeModels as _mergeModels } from 'vue'
 
@@ -1622,7 +1642,7 @@ return { emit }
 })"
 `;
 
-exports[`SFC compile <script setup> > with TypeScript > defineModel > basic usage 1`] = `
+exports[`SFC compile <script setup> > with TypeScript > defineModel() > basic usage 1`] = `
 "import { useModel as _useModel, defineComponent as _defineComponent } from 'vue'
 
 export default /*#__PURE__*/_defineComponent({
@@ -1645,7 +1665,7 @@ return { modelValue, count, disabled }
 })"
 `;
 
-exports[`SFC compile <script setup> > with TypeScript > defineModel > w/ production mode 1`] = `
+exports[`SFC compile <script setup> > with TypeScript > defineModel() > w/ production mode 1`] = `
 "import { useModel as _useModel, defineComponent as _defineComponent } from 'vue'
 
 export default /*#__PURE__*/_defineComponent({
diff --git a/packages/compiler-sfc/__tests__/compileScript.spec.ts b/packages/compiler-sfc/__tests__/compileScript.spec.ts
index 94568f63ceb..0267a5fea53 100644
--- a/packages/compiler-sfc/__tests__/compileScript.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScript.spec.ts
@@ -418,6 +418,28 @@ defineExpose({ foo: 123 })
         modelValue: BindingTypes.PROPS
       })
     })
+
+    test('w/ array props', () => {
+      const { content, bindings } = compile(
+        `
+        <script setup>
+        defineProps(['foo', 'bar'])
+        const count = defineModel('count')
+        </script>
+      `,
+        { defineModel: true }
+      )
+      assertCode(content)
+      expect(content).toMatch(`_mergeModels(['foo', 'bar'], {`)
+      expect(content).toMatch(`"count": { required: true }`)
+      expect(content).toMatch(`const count = _useModel("count")`)
+      expect(content).not.toMatch('defineModel')
+      expect(bindings).toStrictEqual({
+        foo: BindingTypes.PROPS,
+        bar: BindingTypes.PROPS,
+        count: BindingTypes.SETUP_REF
+      })
+    })
   })
 
   test('<script> after <script setup> the script content not end with `\\n`', () => {
@@ -1765,7 +1787,7 @@ const emit = defineEmits(['a', 'b'])
       })
     })
 
-    describe('defineModel', () => {
+    describe('defineModel()', () => {
       test('basic usage', () => {
         const { content, bindings } = compile(
           `

From 5fa8165c51ea7aca148b7fb0f22745fe8e469570 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?=
 <sxzz@sxzz.moe>
Date: Thu, 6 Apr 2023 02:19:41 +0800
Subject: [PATCH 06/26] feat: fn with default

---
 .../__tests__/__snapshots__/compileScript.spec.ts.snap   | 8 +++++---
 packages/compiler-sfc/__tests__/compileScript.spec.ts    | 9 +++++++--
 packages/compiler-sfc/src/compileScript.ts               | 2 +-
 3 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
index eb211fd72ce..145ab38626d 100644
--- a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
@@ -1671,20 +1671,22 @@ exports[`SFC compile <script setup> > with TypeScript > defineModel() > w/ produ
 export default /*#__PURE__*/_defineComponent({
   props: {
     \\"modelValue\\": Boolean,
-    \\"fn\\": Function,
+    \\"fn\\": {  },
+    \\"fnWithDefault\\": { type: Function, ...{ default: () => null } },
     \\"str\\": {  },
     \\"optional\\": { required: false },
   },
-  emits: [\\"update:modelValue\\", \\"update:fn\\", \\"update:str\\", \\"update:optional\\"],
+  emits: [\\"update:modelValue\\", \\"update:fn\\", \\"update:fnWithDefault\\", \\"update:str\\", \\"update:optional\\"],
   setup(__props, { expose: __expose }) {
   __expose();
 
           const modelValue = _useModel(\\"modelValue\\")
           const fn = _useModel(\\"fn\\")
+          const fnWithDefault = _useModel(\\"fnWithDefault\\")
           const str = _useModel(\\"str\\")
           const optional = _useModel(\\"optional\\")
           
-return { modelValue, fn, str, optional }
+return { modelValue, fn, fnWithDefault, str, optional }
 }
 
 })"
diff --git a/packages/compiler-sfc/__tests__/compileScript.spec.ts b/packages/compiler-sfc/__tests__/compileScript.spec.ts
index 0267a5fea53..c156ff24153 100644
--- a/packages/compiler-sfc/__tests__/compileScript.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScript.spec.ts
@@ -1829,6 +1829,7 @@ const emit = defineEmits(['a', 'b'])
           <script setup lang="ts">
           const modelValue = defineModel<boolean>()
           const fn = defineModel<() => void>('fn')
+          const fnWithDefault = defineModel<() => void>('fnWithDefault', { default: () => null })
           const str = defineModel<string>('str')
           const optional = defineModel<string>('optional', { required: false })
           </script>
@@ -1837,11 +1838,14 @@ const emit = defineEmits(['a', 'b'])
         )
         assertCode(content)
         expect(content).toMatch('"modelValue": Boolean')
-        expect(content).toMatch('"fn": Function')
+        expect(content).toMatch('"fn": {  }')
+        expect(content).toMatch(
+          '"fnWithDefault": { type: Function, ...{ default: () => null } },'
+        )
         expect(content).toMatch('"str": {  }')
         expect(content).toMatch('"optional": { required: false }')
         expect(content).toMatch(
-          'emits: ["update:modelValue", "update:fn", "update:str", "update:optional"]'
+          'emits: ["update:modelValue", "update:fn", "update:fnWithDefault", "update:str", "update:optional"]'
         )
         expect(content).toMatch(`const modelValue = _useModel("modelValue")`)
         expect(content).toMatch(`const fn = _useModel("fn")`)
@@ -1849,6 +1853,7 @@ const emit = defineEmits(['a', 'b'])
         expect(bindings).toStrictEqual({
           modelValue: BindingTypes.SETUP_REF,
           fn: BindingTypes.SETUP_REF,
+          fnWithDefault: BindingTypes.SETUP_REF,
           str: BindingTypes.SETUP_REF,
           optional: BindingTypes.SETUP_REF
         })
diff --git a/packages/compiler-sfc/src/compileScript.ts b/packages/compiler-sfc/src/compileScript.ts
index aaf71350f89..2f543469e22 100644
--- a/packages/compiler-sfc/src/compileScript.ts
+++ b/packages/compiler-sfc/src/compileScript.ts
@@ -1025,7 +1025,7 @@ export function compileScript(
         let runtimeTypes = type && inferRuntimeType(type, declaredTypes)
         if (runtimeTypes && isProd) {
           runtimeTypes = runtimeTypes.filter(
-            el => el === 'Boolean' || el === 'Function'
+            el => el === 'Boolean' || (el === 'Function' && options)
           )
         }
         const runtimeType =

From 12b9a910293653e26a26550341bcdc7bebce2587 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?=
 <sxzz@sxzz.moe>
Date: Thu, 6 Apr 2023 02:22:45 +0800
Subject: [PATCH 07/26] chore: rename

---
 packages/compiler-sfc/src/compileScript.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/compiler-sfc/src/compileScript.ts b/packages/compiler-sfc/src/compileScript.ts
index 2f543469e22..1a59d6e7cce 100644
--- a/packages/compiler-sfc/src/compileScript.ts
+++ b/packages/compiler-sfc/src/compileScript.ts
@@ -1039,10 +1039,10 @@ export function compileScript(
         if (runtimeType && isProd && !options) {
           decl = runtimeType
         } else {
-          const defaultOptions: string[] = []
-          if (runtimeType) defaultOptions.push(`type: ${runtimeType}`)
-          if (!isProd) defaultOptions.push('required: true')
-          decl = defaultOptions.join(', ')
+          const pairs: string[] = []
+          if (runtimeType) pairs.push(`type: ${runtimeType}`)
+          if (!isProd) pairs.push('required: true')
+          decl = pairs.join(', ')
 
           if (decl && options) {
             decl = isTS

From 45d078435e4028303e49c007c983abe313d26ac9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?=
 <sxzz@sxzz.moe>
Date: Thu, 6 Apr 2023 02:27:52 +0800
Subject: [PATCH 08/26] refactor: re-organize

---
 packages/compiler-sfc/src/compileScript.ts | 53 ++++++++++++----------
 1 file changed, 29 insertions(+), 24 deletions(-)

diff --git a/packages/compiler-sfc/src/compileScript.ts b/packages/compiler-sfc/src/compileScript.ts
index 1a59d6e7cce..e7f79f44a25 100644
--- a/packages/compiler-sfc/src/compileScript.ts
+++ b/packages/compiler-sfc/src/compileScript.ts
@@ -1912,22 +1912,7 @@ export function compileScript(
   let propsDecl = genRuntimeProps()
   if (propsDecl) runtimeOptions += `\n  props: ${propsDecl},`
 
-  let emitsDecl = ''
-  if (emitsRuntimeDecl) {
-    emitsDecl = scriptSetup.content
-      .slice(emitsRuntimeDecl.start!, emitsRuntimeDecl.end!)
-      .trim()
-  } else if (emitsTypeDecl) {
-    emitsDecl = genRuntimeEmits(typeDeclaredEmits)
-  }
-  if (hasDefineModelCall) {
-    let modelEmitsDecl = `[${Object.keys(modelDecls)
-      .map(n => JSON.stringify(`update:${n}`))
-      .join(', ')}]`
-    emitsDecl = emitsDecl
-      ? `${helper('mergeModels')}(${emitsDecl}, ${modelEmitsDecl})`
-      : modelEmitsDecl
-  }
+  let emitsDecl = genRuntimeEmits()
   if (emitsDecl) runtimeOptions += `\n  emits: ${emitsDecl},`
 
   let definedOptions = ''
@@ -2008,6 +1993,34 @@ export function compileScript(
     scriptAst: scriptAst?.body,
     scriptSetupAst: scriptSetupAst?.body
   }
+
+  function genRuntimeEmits() {
+    function genEmitsFromTS() {
+      return typeDeclaredEmits.size
+        ? `[${Array.from(typeDeclaredEmits)
+            .map(k => JSON.stringify(k))
+            .join(', ')}]`
+        : ``
+    }
+
+    let emitsDecl = ''
+    if (emitsRuntimeDecl) {
+      emitsDecl = scriptSetup!.content
+        .slice(emitsRuntimeDecl.start!, emitsRuntimeDecl.end!)
+        .trim()
+    } else if (emitsTypeDecl) {
+      emitsDecl = genEmitsFromTS()
+    }
+    if (hasDefineModelCall) {
+      let modelEmitsDecl = `[${Object.keys(modelDecls)
+        .map(n => JSON.stringify(`update:${n}`))
+        .join(', ')}]`
+      emitsDecl = emitsDecl
+        ? `${helper('mergeModels')}(${emitsDecl}, ${modelEmitsDecl})`
+        : modelEmitsDecl
+    }
+    return emitsDecl
+  }
 }
 
 function registerBinding(
@@ -2497,14 +2510,6 @@ function extractEventNames(
   }
 }
 
-function genRuntimeEmits(emits: Set<string>) {
-  return emits.size
-    ? `[${Array.from(emits)
-        .map(k => JSON.stringify(k))
-        .join(', ')}]`
-    : ``
-}
-
 function canNeverBeRef(node: Node, userReactiveImport?: string): boolean {
   if (isCallOf(node, userReactiveImport)) {
     return true

From 87c4e0036fcf16ed69c4b7cef9f96a6561f5affe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?=
 <sxzz@sxzz.moe>
Date: Thu, 6 Apr 2023 03:01:32 +0800
Subject: [PATCH 09/26] test: add cases

---
 .../__tests__/apiSetupHelpers.spec.ts         | 118 +++++++++++++++++-
 packages/runtime-core/src/apiSetupHelpers.ts  |   5 +-
 2 files changed, 117 insertions(+), 6 deletions(-)

diff --git a/packages/runtime-core/__tests__/apiSetupHelpers.spec.ts b/packages/runtime-core/__tests__/apiSetupHelpers.spec.ts
index f69c3703e93..de26f3b999f 100644
--- a/packages/runtime-core/__tests__/apiSetupHelpers.spec.ts
+++ b/packages/runtime-core/__tests__/apiSetupHelpers.spec.ts
@@ -13,7 +13,9 @@ import {
   Suspense,
   computed,
   ComputedRef,
-  shallowReactive
+  shallowReactive,
+  nextTick,
+  ref
 } from '@vue/runtime-test'
 import {
   defineEmits,
@@ -25,7 +27,8 @@ import {
   mergeDefaults,
   withAsyncContext,
   createPropsRestProxy,
-  mergeModelsOptions
+  mergeModelsOptions,
+  useModel
 } from '../src/apiSetupHelpers'
 
 describe('SFC <script setup> helpers', () => {
@@ -175,6 +178,117 @@ describe('SFC <script setup> helpers', () => {
     })
   })
 
+  describe('useModel', () => {
+    test('basic', async () => {
+      let proxy: any
+      const Comp = defineComponent({
+        props: {
+          modelValue: { required: true }
+        },
+        emits: ['update:modelValue'],
+        setup() {
+          const foo = useModel<string>('modelValue')
+          const update = () => {
+            foo.value = 'bar'
+          }
+          return { foo, update }
+        },
+        render() {
+          proxy = this
+        }
+      })
+
+      const msg = ref('')
+      const setValue = vi.fn(v => (msg.value = v))
+      const root = nodeOps.createElement('div')
+      createApp(() =>
+        h(Comp, {
+          modelValue: msg.value,
+          'onUpdate:modelValue': setValue
+        })
+      ).mount(root)
+
+      expect(proxy.foo).toBe('')
+      expect(msg.value).toBe('')
+      expect(setValue).not.toBeCalled()
+
+      // update from child
+      proxy.update()
+
+      await nextTick()
+      expect(msg.value).toBe('bar')
+      expect(proxy.foo).toBe('bar')
+      expect(setValue).toBeCalledTimes(1)
+
+      // update from parent
+      msg.value = 'qux'
+
+      await nextTick()
+      expect(msg.value).toBe('qux')
+      expect(proxy.foo).toBe('qux')
+      expect(setValue).toBeCalledTimes(1)
+    })
+
+    test('optional', async () => {
+      let proxy: any
+      const Comp = defineComponent({
+        props: ['foo'],
+        emits: ['update:foo'],
+        setup() {
+          const foo = useModel<string>('foo')
+          const update = () => {
+            foo.value = 'bar'
+          }
+          return { foo, update }
+        },
+        render() {
+          proxy = this
+        }
+      })
+
+      const root = nodeOps.createElement('div')
+      const updateFoo = vi.fn()
+      render(h(Comp, { 'onUpdate:foo': updateFoo }), root)
+
+      expect(proxy.foo).toBeUndefined()
+      proxy.update()
+
+      expect(proxy.foo).toBe('bar')
+
+      await nextTick()
+      expect(updateFoo).toBeCalledTimes(1)
+    })
+
+    test('default value', async () => {
+      let proxy: any
+      const Comp = defineComponent({
+        props: { count: { default: 0 } },
+        emits: ['update:count'],
+        setup() {
+          const count = useModel<number>('count')
+          const inc = () => {
+            count.value++
+          }
+          return { count, inc }
+        },
+        render() {
+          proxy = this
+        }
+      })
+
+      const root = nodeOps.createElement('div')
+      const updateCount = vi.fn()
+      render(h(Comp, { 'onUpdate:count': updateCount }), root)
+
+      expect(proxy.count).toBe(0)
+
+      proxy.inc()
+      expect(proxy.count).toBe(1)
+      await nextTick()
+      expect(updateCount).toBeCalledTimes(1)
+    })
+  })
+
   test('createPropsRestProxy', () => {
     const original = shallowReactive({
       foo: 1,
diff --git a/packages/runtime-core/src/apiSetupHelpers.ts b/packages/runtime-core/src/apiSetupHelpers.ts
index 6122be8a935..c61d4055f3b 100644
--- a/packages/runtime-core/src/apiSetupHelpers.ts
+++ b/packages/runtime-core/src/apiSetupHelpers.ts
@@ -300,10 +300,7 @@ export function useModel<T>(name: string): WritableComputedRef<T> {
   }
 
   const options = (i.propsOptions[0] as NormalizedProps)[name]
-  if (
-    isObject(options) &&
-    (options.required === false || 'default' in options)
-  ) {
+  if (isObject(options) && (!options.required || 'default' in options)) {
     const proxy = ref<any>(i.props[name])
 
     watch(

From e84cc32be7ae965b32d62fbd9f132c55ab4aacae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?=
 <sxzz@sxzz.moe>
Date: Thu, 6 Apr 2023 03:07:16 +0800
Subject: [PATCH 10/26] refactor: remove default

---
 packages/runtime-core/src/apiSetupHelpers.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/runtime-core/src/apiSetupHelpers.ts b/packages/runtime-core/src/apiSetupHelpers.ts
index c61d4055f3b..1c6a7acae73 100644
--- a/packages/runtime-core/src/apiSetupHelpers.ts
+++ b/packages/runtime-core/src/apiSetupHelpers.ts
@@ -300,7 +300,7 @@ export function useModel<T>(name: string): WritableComputedRef<T> {
   }
 
   const options = (i.propsOptions[0] as NormalizedProps)[name]
-  if (isObject(options) && (!options.required || 'default' in options)) {
+  if (isObject(options) && !options.required) {
     const proxy = ref<any>(i.props[name])
 
     watch(

From c448500e2228818f1f78bce7bf75c88576a991e1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?=
 <sxzz@sxzz.moe>
Date: Thu, 6 Apr 2023 03:26:18 +0800
Subject: [PATCH 11/26] feat: add doc

---
 packages/runtime-core/src/apiSetupHelpers.ts | 26 ++++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/packages/runtime-core/src/apiSetupHelpers.ts b/packages/runtime-core/src/apiSetupHelpers.ts
index 1c6a7acae73..f6d3eb4168d 100644
--- a/packages/runtime-core/src/apiSetupHelpers.ts
+++ b/packages/runtime-core/src/apiSetupHelpers.ts
@@ -211,6 +211,32 @@ export function defineSlots<
   return null as any
 }
 
+/**
+ * (**Experimental**) Vue `<script setup>` compiler macro for declaring a two-way
+ * binding prop. This will declare a prop with the same name and a corresponding
+ * `update:propName` event.
+ *
+ * The prop will be automatically marked as `required` by default. Use the
+ * `required: false` option or set a default value to make it optional.
+ *
+ * Example: required model
+ * ```ts
+ * const modelValue = defineModel<string>()
+ * modelValue.value = "hello"
+ * ```
+ *
+ * Example: specified a name
+ * ```ts
+ * const count = defineModel<number>('count')
+ * count.value++
+ * ```
+ *
+ * Example: specified a name and default value
+ * ```ts
+ * const count = defineModel<number>('count', { default: 0 })
+ * ```
+ *
+ */
 export function defineModel<T>(
   options: { required: false } & Record<string, unknown>
 ): WritableComputedRef<T | undefined>

From 75f3a473f2bed1db0b8a8daf4f040a6aa31c3496 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?=
 <sxzz@sxzz.moe>
Date: Thu, 6 Apr 2023 03:29:48 +0800
Subject: [PATCH 12/26] refactor: simplify

---
 packages/runtime-core/src/apiSetupHelpers.ts | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/runtime-core/src/apiSetupHelpers.ts b/packages/runtime-core/src/apiSetupHelpers.ts
index f6d3eb4168d..281b353fafe 100644
--- a/packages/runtime-core/src/apiSetupHelpers.ts
+++ b/packages/runtime-core/src/apiSetupHelpers.ts
@@ -3,8 +3,7 @@ import {
   isPromise,
   isFunction,
   Prettify,
-  UnionToIntersection,
-  isObject
+  UnionToIntersection
 } from '@vue/shared'
 import {
   getCurrentInstance,
@@ -326,7 +325,7 @@ export function useModel<T>(name: string): WritableComputedRef<T> {
   }
 
   const options = (i.propsOptions[0] as NormalizedProps)[name]
-  if (isObject(options) && !options.required) {
+  if (options && !options.required) {
     const proxy = ref<any>(i.props[name])
 
     watch(

From 11149ec79d8ec29af4eb3d2606c21416793bdf89 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?=
 <sxzz@sxzz.moe>
Date: Thu, 6 Apr 2023 05:09:54 +0800
Subject: [PATCH 13/26] fix: add required for production mode

---
 .../__snapshots__/compileScript.spec.ts.snap     | 16 ++++++++--------
 .../compileScriptPropsDestructure.spec.ts.snap   | 12 ++++++------
 .../compiler-sfc/__tests__/compileScript.spec.ts | 16 ++++++++--------
 .../compileScriptPropsDestructure.spec.ts        | 14 +++++++-------
 packages/compiler-sfc/src/compileScript.ts       |  8 ++++++--
 5 files changed, 35 insertions(+), 31 deletions(-)

diff --git a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
index 145ab38626d..eb445acfc37 100644
--- a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
@@ -2054,10 +2054,10 @@ import { defaults } from './foo'
       
 export default /*#__PURE__*/_defineComponent({
   props: _mergeDefaults({
-    foo: { type: Function },
-    bar: { type: Boolean },
-    baz: { type: [Boolean, Function] },
-    qux: null
+    foo: { type: Function, required: true },
+    bar: { type: Boolean, required: true },
+    baz: { type: [Boolean, Function], required: true },
+    qux: { required: true }
   }, { ...defaults }),
   setup(__props: any, { expose: __expose }) {
   __expose();
@@ -2159,10 +2159,10 @@ exports[`SFC compile <script setup> > with TypeScript > withDefaults (static) w/
 
 export default /*#__PURE__*/_defineComponent({
   props: {
-    foo: null,
-    bar: { type: Boolean },
-    baz: { type: [Boolean, Function], default: true },
-    qux: { default: 'hi' }
+    foo: { required: true },
+    bar: { type: Boolean, required: true },
+    baz: { type: [Boolean, Function], required: true, default: true },
+    qux: { required: true, default: 'hi' }
   },
   setup(__props: any, { expose: __expose }) {
   __expose();
diff --git a/packages/compiler-sfc/__tests__/__snapshots__/compileScriptPropsDestructure.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/compileScriptPropsDestructure.spec.ts.snap
index 525f4b6edb0..b0140a3f23e 100644
--- a/packages/compiler-sfc/__tests__/__snapshots__/compileScriptPropsDestructure.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/compileScriptPropsDestructure.spec.ts.snap
@@ -121,12 +121,12 @@ exports[`sfc props transform > default values w/ type declaration, prod mode 1`]
 
 export default /*#__PURE__*/_defineComponent({
   props: {
-    foo: { default: 1 },
-    bar: { default: () => ({}) },
-    baz: null,
-    boola: { type: Boolean },
-    boolb: { type: [Boolean, Number] },
-    func: { type: Function, default: () => {} }
+    foo: { required: false, default: 1 },
+    bar: { required: false, default: () => ({}) },
+    baz: { required: false },
+    boola: { type: Boolean, required: false },
+    boolb: { type: [Boolean, Number], required: false },
+    func: { type: Function, required: false, default: () => {} }
   },
   setup(__props: any) {
 
diff --git a/packages/compiler-sfc/__tests__/compileScript.spec.ts b/packages/compiler-sfc/__tests__/compileScript.spec.ts
index c156ff24153..87015a9a083 100644
--- a/packages/compiler-sfc/__tests__/compileScript.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScript.spec.ts
@@ -1510,12 +1510,12 @@ const emit = defineEmits(['a', 'b'])
       expect(content).toMatch(`const props = __props`)
 
       // foo has no default value, the Function can be dropped
-      expect(content).toMatch(`foo: null`)
-      expect(content).toMatch(`bar: { type: Boolean }`)
+      expect(content).toMatch(`foo: { required: true }`)
+      expect(content).toMatch(`bar: { type: Boolean, required: true }`)
       expect(content).toMatch(
-        `baz: { type: [Boolean, Function], default: true }`
+        `baz: { type: [Boolean, Function], required: true, default: true }`
       )
-      expect(content).toMatch(`qux: { default: 'hi' }`)
+      expect(content).toMatch(`qux: { required: true, default: 'hi' }`)
     })
 
     test('withDefaults (dynamic)', () => {
@@ -1585,10 +1585,10 @@ const emit = defineEmits(['a', 'b'])
       expect(content).toMatch(
         `
   _mergeDefaults({
-    foo: { type: Function },
-    bar: { type: Boolean },
-    baz: { type: [Boolean, Function] },
-    qux: null
+    foo: { type: Function, required: true },
+    bar: { type: Boolean, required: true },
+    baz: { type: [Boolean, Function], required: true },
+    qux: { required: true }
   }, { ...defaults })`.trim()
       )
     })
diff --git a/packages/compiler-sfc/__tests__/compileScriptPropsDestructure.spec.ts b/packages/compiler-sfc/__tests__/compileScriptPropsDestructure.spec.ts
index 193b3e5a1af..163b635ad1e 100644
--- a/packages/compiler-sfc/__tests__/compileScriptPropsDestructure.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScriptPropsDestructure.spec.ts
@@ -131,17 +131,17 @@ describe('sfc props transform', () => {
     `,
       { isProd: true }
     )
+    assertCode(content)
     // literals can be used as-is, non-literals are always returned from a
     // function
     expect(content).toMatch(`props: {
-    foo: { default: 1 },
-    bar: { default: () => ({}) },
-    baz: null,
-    boola: { type: Boolean },
-    boolb: { type: [Boolean, Number] },
-    func: { type: Function, default: () => {} }
+    foo: { required: false, default: 1 },
+    bar: { required: false, default: () => ({}) },
+    baz: { required: false },
+    boola: { type: Boolean, required: false },
+    boolb: { type: [Boolean, Number], required: false },
+    func: { type: Function, required: false, default: () => {} }
   }`)
-    assertCode(content)
   })
 
   test('aliasing', () => {
diff --git a/packages/compiler-sfc/src/compileScript.ts b/packages/compiler-sfc/src/compileScript.ts
index e7f79f44a25..dd985defcd2 100644
--- a/packages/compiler-sfc/src/compileScript.ts
+++ b/packages/compiler-sfc/src/compileScript.ts
@@ -997,12 +997,16 @@ export function compileScript(
           // #4783 for boolean, should keep the type
           // #7111 for function, if default value exists or it's not static, should keep it
           // in production
-          return `${key}: { type: ${toRuntimeTypeString(type)}${
+          return `${key}: { type: ${toRuntimeTypeString(
+            type
+          )}, required: ${required}${
             defaultString ? `, ${defaultString}` : ``
           } }`
         } else {
           // production: checks are useless
-          return `${key}: ${defaultString ? `{ ${defaultString} }` : 'null'}`
+          return `${key}: ${`{ required: ${required}${
+            defaultString ? `, ${defaultString}` : ``
+          } }`}`
         }
       })
       .join(',\n    ')}\n  }`

From e56ffa8cd90c223a05d70d08128d245ef6e67e5c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?=
 <sxzz@sxzz.moe>
Date: Thu, 6 Apr 2023 05:31:52 +0800
Subject: [PATCH 14/26] feat: addRequiredToModels

---
 .../__snapshots__/compileScript.spec.ts.snap  | 48 ++++-----
 .../__tests__/compileScript.spec.ts           | 29 +++---
 packages/compiler-sfc/src/compileScript.ts    | 22 ++---
 .../__tests__/apiSetupHelpers.spec.ts         | 97 +++++++++++--------
 packages/runtime-core/src/apiSetupHelpers.ts  | 19 +++-
 packages/runtime-core/src/componentProps.ts   |  2 +-
 packages/runtime-core/src/index.ts            |  1 +
 7 files changed, 123 insertions(+), 95 deletions(-)

diff --git a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
index eb445acfc37..d490d6d0951 100644
--- a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
@@ -654,13 +654,13 @@ return {  }
 `;
 
 exports[`SFC compile <script setup> > defineModel() > basic usage 1`] = `
-"import { useModel as _useModel } from 'vue'
+"import { useModel as _useModel, addRequiredToModels as _addRequiredToModels } from 'vue'
 
 export default {
-  props: {
-    \\"modelValue\\": Object.assign({ required: true }, { required: true }),
-    \\"count\\": { required: true },
-  },
+  props: _addRequiredToModels({
+    \\"modelValue\\": { required: true },
+    \\"count\\": {},
+  }),
   emits: [\\"update:modelValue\\", \\"update:count\\"],
   setup(__props, { expose: __expose }) {
   __expose();
@@ -675,12 +675,12 @@ return { modelValue, c }
 `;
 
 exports[`SFC compile <script setup> > defineModel() > w/ array props 1`] = `
-"import { useModel as _useModel, mergeModels as _mergeModels } from 'vue'
+"import { useModel as _useModel, addRequiredToModels as _addRequiredToModels, mergeModels as _mergeModels } from 'vue'
 
 export default {
-  props: _mergeModels(['foo', 'bar'], {
-    \\"count\\": { required: true },
-  }),
+  props: _mergeModels(['foo', 'bar'], _addRequiredToModels({
+    \\"count\\": {},
+  })),
   emits: [\\"update:count\\"],
   setup(__props, { expose: __expose }) {
   __expose();
@@ -695,12 +695,12 @@ return { count }
 `;
 
 exports[`SFC compile <script setup> > defineModel() > w/ defineProps and defineEmits 1`] = `
-"import { useModel as _useModel, mergeModels as _mergeModels } from 'vue'
+"import { useModel as _useModel, addRequiredToModels as _addRequiredToModels, mergeModels as _mergeModels } from 'vue'
 
 export default {
-  props: _mergeModels({ foo: String }, {
-    \\"modelValue\\": Object.assign({ required: true }, { default: 0 }),
-  }),
+  props: _mergeModels({ foo: String }, _addRequiredToModels({
+    \\"modelValue\\": { default: 0 },
+  })),
   emits: _mergeModels(['change'], [\\"update:modelValue\\"]),
   setup(__props, { expose: __expose }) {
   __expose();
@@ -1643,14 +1643,14 @@ return { emit }
 `;
 
 exports[`SFC compile <script setup> > with TypeScript > defineModel() > basic usage 1`] = `
-"import { useModel as _useModel, defineComponent as _defineComponent } from 'vue'
+"import { useModel as _useModel, addRequiredToModels as _addRequiredToModels, defineComponent as _defineComponent } from 'vue'
 
 export default /*#__PURE__*/_defineComponent({
-  props: {
-    \\"modelValue\\": { type: [Boolean, String], required: true },
-    \\"count\\": { type: Number, required: true },
-    \\"disabled\\": { type: Number, required: true, ...{ required: false } },
-  },
+  props: _addRequiredToModels({
+    \\"modelValue\\": { type: [Boolean, String] },
+    \\"count\\": { type: Number },
+    \\"disabled\\": { type: Number, ...{ required: false } },
+  }),
   emits: [\\"update:modelValue\\", \\"update:count\\", \\"update:disabled\\"],
   setup(__props, { expose: __expose }) {
   __expose();
@@ -1666,16 +1666,16 @@ return { modelValue, count, disabled }
 `;
 
 exports[`SFC compile <script setup> > with TypeScript > defineModel() > w/ production mode 1`] = `
-"import { useModel as _useModel, defineComponent as _defineComponent } from 'vue'
+"import { useModel as _useModel, addRequiredToModels as _addRequiredToModels, defineComponent as _defineComponent } from 'vue'
 
 export default /*#__PURE__*/_defineComponent({
-  props: {
+  props: _addRequiredToModels({
     \\"modelValue\\": Boolean,
-    \\"fn\\": {  },
+    \\"fn\\": {},
     \\"fnWithDefault\\": { type: Function, ...{ default: () => null } },
-    \\"str\\": {  },
+    \\"str\\": {},
     \\"optional\\": { required: false },
-  },
+  }),
   emits: [\\"update:modelValue\\", \\"update:fn\\", \\"update:fnWithDefault\\", \\"update:str\\", \\"update:optional\\"],
   setup(__props, { expose: __expose }) {
   __expose();
diff --git a/packages/compiler-sfc/__tests__/compileScript.spec.ts b/packages/compiler-sfc/__tests__/compileScript.spec.ts
index 87015a9a083..4984477cd6a 100644
--- a/packages/compiler-sfc/__tests__/compileScript.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScript.spec.ts
@@ -377,10 +377,9 @@ defineExpose({ foo: 123 })
         { defineModel: true }
       )
       assertCode(content)
-      expect(content).toMatch(
-        '"modelValue": Object.assign({ required: true }, { required: true }),'
-      )
-      expect(content).toMatch('"count": { required: true },')
+      expect(content).toMatch('props: _addRequiredToModels({')
+      expect(content).toMatch('"modelValue": { required: true },')
+      expect(content).toMatch('"count": {},')
       expect(content).toMatch('emits: ["update:modelValue", "update:count"],')
       expect(content).toMatch(`const modelValue = _useModel("modelValue")`)
       expect(content).toMatch(`const c = _useModel("count")`)
@@ -407,9 +406,7 @@ defineExpose({ foo: 123 })
       )
       assertCode(content)
       expect(content).toMatch(`props: _mergeModels({ foo: String }`)
-      expect(content).toMatch(
-        `"modelValue": Object.assign({ required: true }, { default: 0 })`
-      )
+      expect(content).toMatch(`"modelValue": { default: 0 }`)
       expect(content).toMatch(`const count = _useModel("modelValue")`)
       expect(content).not.toMatch('defineModel')
       expect(bindings).toStrictEqual({
@@ -430,8 +427,10 @@ defineExpose({ foo: 123 })
         { defineModel: true }
       )
       assertCode(content)
-      expect(content).toMatch(`_mergeModels(['foo', 'bar'], {`)
-      expect(content).toMatch(`"count": { required: true }`)
+      expect(content)
+        .toMatch(`props: _mergeModels(['foo', 'bar'], _addRequiredToModels({
+    "count": {},
+  }))`)
       expect(content).toMatch(`const count = _useModel("count")`)
       expect(content).not.toMatch('defineModel')
       expect(bindings).toStrictEqual({
@@ -1800,12 +1799,10 @@ const emit = defineEmits(['a', 'b'])
           { defineModel: true }
         )
         assertCode(content)
+        expect(content).toMatch('"modelValue": { type: [Boolean, String] }')
+        expect(content).toMatch('"count": { type: Number }')
         expect(content).toMatch(
-          '"modelValue": { type: [Boolean, String], required: true }'
-        )
-        expect(content).toMatch('"count": { type: Number, required: true }')
-        expect(content).toMatch(
-          '"disabled": { type: Number, required: true, ...{ required: false } },'
+          '"disabled": { type: Number, ...{ required: false } },'
         )
         expect(content).toMatch(
           'emits: ["update:modelValue", "update:count", "update:disabled"]'
@@ -1838,11 +1835,11 @@ const emit = defineEmits(['a', 'b'])
         )
         assertCode(content)
         expect(content).toMatch('"modelValue": Boolean')
-        expect(content).toMatch('"fn": {  }')
+        expect(content).toMatch('"fn": {}')
         expect(content).toMatch(
           '"fnWithDefault": { type: Function, ...{ default: () => null } },'
         )
-        expect(content).toMatch('"str": {  }')
+        expect(content).toMatch('"str": {}')
         expect(content).toMatch('"optional": { required: false }')
         expect(content).toMatch(
           'emits: ["update:modelValue", "update:fn", "update:fnWithDefault", "update:str", "update:optional"]'
diff --git a/packages/compiler-sfc/src/compileScript.ts b/packages/compiler-sfc/src/compileScript.ts
index dd985defcd2..1f86bdb98e6 100644
--- a/packages/compiler-sfc/src/compileScript.ts
+++ b/packages/compiler-sfc/src/compileScript.ts
@@ -127,7 +127,7 @@ export interface SFCScriptCompileOptions {
    */
   hoistStatic?: boolean
   /**
-   * (Experimental) Enable macro `defineModel`
+   * (**Experimental**) Enable macro `defineModel`
    */
   defineModel?: boolean
 }
@@ -1032,34 +1032,28 @@ export function compileScript(
             el => el === 'Boolean' || (el === 'Function' && options)
           )
         }
-        const runtimeType =
+        let runtimeType =
           (runtimeTypes &&
             runtimeTypes.length > 0 &&
             toRuntimeTypeString(runtimeTypes)) ||
           undefined
 
         let decl: string
-
         if (runtimeType && isProd && !options) {
           decl = runtimeType
         } else {
-          const pairs: string[] = []
-          if (runtimeType) pairs.push(`type: ${runtimeType}`)
-          if (!isProd) pairs.push('required: true')
-          decl = pairs.join(', ')
-
-          if (decl && options) {
+          if (runtimeType) runtimeType = `type: ${runtimeType}`
+          if (runtimeType && options) {
             decl = isTS
-              ? `{ ${decl}, ...${options} }`
-              : `Object.assign({ ${decl} }, ${options})`
+              ? `{ ${runtimeType}, ...${options} }`
+              : `Object.assign({ ${runtimeType} }, ${options})`
           } else {
-            decl = options || `{ ${decl} }`
+            decl = options || (runtimeType ? `{ ${runtimeType} }` : '{}')
           }
         }
-
         modelPropsDecl += `\n    ${JSON.stringify(name)}: ${decl},`
       }
-      return `{${modelPropsDecl}\n  }`
+      return `${helper('addRequiredToModels')}({${modelPropsDecl}\n  })`
     }
 
     let propsDecls: undefined | string
diff --git a/packages/runtime-core/__tests__/apiSetupHelpers.spec.ts b/packages/runtime-core/__tests__/apiSetupHelpers.spec.ts
index de26f3b999f..f3d6fd794ca 100644
--- a/packages/runtime-core/__tests__/apiSetupHelpers.spec.ts
+++ b/packages/runtime-core/__tests__/apiSetupHelpers.spec.ts
@@ -28,7 +28,8 @@ import {
   withAsyncContext,
   createPropsRestProxy,
   mergeModelsOptions,
-  useModel
+  useModel,
+  addRequiredToModels
 } from '../src/apiSetupHelpers'
 
 describe('SFC <script setup> helpers', () => {
@@ -178,24 +179,40 @@ describe('SFC <script setup> helpers', () => {
     })
   })
 
+  test('addRequiredToModels', () => {
+    expect(
+      addRequiredToModels({
+        foo: {},
+        bar: { required: false },
+        baz: { default: 1 },
+        qux: { required: false, default: 1 },
+        quux: { type: String }
+      })
+    ).toStrictEqual({
+      foo: { required: true },
+      bar: { required: false },
+      baz: { default: 1 },
+      qux: { required: false, default: 1 },
+      quux: { type: String, required: true }
+    })
+  })
+
   describe('useModel', () => {
     test('basic', async () => {
-      let proxy: any
+      let foo: any
+      const update = () => {
+        foo.value = 'bar'
+      }
+
       const Comp = defineComponent({
         props: {
           modelValue: { required: true }
         },
         emits: ['update:modelValue'],
         setup() {
-          const foo = useModel<string>('modelValue')
-          const update = () => {
-            foo.value = 'bar'
-          }
-          return { foo, update }
+          foo = useModel<string>('modelValue')
         },
-        render() {
-          proxy = this
-        }
+        render() {}
       })
 
       const msg = ref('')
@@ -208,16 +225,19 @@ describe('SFC <script setup> helpers', () => {
         })
       ).mount(root)
 
-      expect(proxy.foo).toBe('')
+      // it's a ComputedRef, so not passive
+      expect(foo.effect).not.toBeUndefined()
+
+      expect(foo.value).toBe('')
       expect(msg.value).toBe('')
       expect(setValue).not.toBeCalled()
 
       // update from child
-      proxy.update()
+      update()
 
       await nextTick()
       expect(msg.value).toBe('bar')
-      expect(proxy.foo).toBe('bar')
+      expect(foo.value).toBe('bar')
       expect(setValue).toBeCalledTimes(1)
 
       // update from parent
@@ -225,65 +245,66 @@ describe('SFC <script setup> helpers', () => {
 
       await nextTick()
       expect(msg.value).toBe('qux')
-      expect(proxy.foo).toBe('qux')
+      expect(foo.value).toBe('qux')
       expect(setValue).toBeCalledTimes(1)
     })
 
     test('optional', async () => {
-      let proxy: any
+      let foo: any
+      const update = () => {
+        foo.value = 'bar'
+      }
+
       const Comp = defineComponent({
         props: ['foo'],
         emits: ['update:foo'],
         setup() {
-          const foo = useModel<string>('foo')
-          const update = () => {
-            foo.value = 'bar'
-          }
-          return { foo, update }
+          foo = useModel<string>('foo')
         },
-        render() {
-          proxy = this
-        }
+        render() {}
       })
 
       const root = nodeOps.createElement('div')
       const updateFoo = vi.fn()
       render(h(Comp, { 'onUpdate:foo': updateFoo }), root)
 
-      expect(proxy.foo).toBeUndefined()
-      proxy.update()
+      // it's a ComputedRef, so it's passive
+      expect(foo.effect).toBeUndefined()
+
+      expect(foo.value).toBeUndefined()
+      update()
 
-      expect(proxy.foo).toBe('bar')
+      expect(foo.value).toBe('bar')
 
       await nextTick()
       expect(updateFoo).toBeCalledTimes(1)
     })
 
     test('default value', async () => {
-      let proxy: any
+      let count: any
+      const inc = () => {
+        count.value++
+      }
       const Comp = defineComponent({
         props: { count: { default: 0 } },
         emits: ['update:count'],
         setup() {
-          const count = useModel<number>('count')
-          const inc = () => {
-            count.value++
-          }
-          return { count, inc }
+          count = useModel<number>('count')
         },
-        render() {
-          proxy = this
-        }
+        render() {}
       })
 
       const root = nodeOps.createElement('div')
       const updateCount = vi.fn()
       render(h(Comp, { 'onUpdate:count': updateCount }), root)
 
-      expect(proxy.count).toBe(0)
+      // it's a ComputedRef, so it's passive
+      expect(count.effect).toBeUndefined()
+
+      expect(count.value).toBe(0)
 
-      proxy.inc()
-      expect(proxy.count).toBe(1)
+      inc()
+      expect(count.value).toBe(1)
       await nextTick()
       expect(updateCount).toBeCalledTimes(1)
     })
diff --git a/packages/runtime-core/src/apiSetupHelpers.ts b/packages/runtime-core/src/apiSetupHelpers.ts
index 281b353fafe..cdef0e42102 100644
--- a/packages/runtime-core/src/apiSetupHelpers.ts
+++ b/packages/runtime-core/src/apiSetupHelpers.ts
@@ -401,8 +401,8 @@ export function mergeDefaults(
 }
 
 /**
- * Runtime helper for merging model declarations. Imported by compiled code
- * only.
+ * Runtime helper for merging model declarations.
+ * Imported by compiled code only.
  * @internal
  */
 export function mergeModelsOptions(
@@ -414,6 +414,21 @@ export function mergeModelsOptions(
   return Object.assign({}, normalizePropsOrEmits(a), normalizePropsOrEmits(b))
 }
 
+/**
+ * Runtime helper for adding required to model declarations.
+ * Imported by compiled code only.
+ * @internal
+ */
+export function addRequiredToModels(options: ComponentObjectPropsOptions) {
+  for (const key in options) {
+    if (!('required' in options[key]!) && !('default' in options[key]!)) {
+      ;(options[key] as any).required = true
+    }
+  }
+
+  return options
+}
+
 /**
  * Used to create a proxy for the rest element when destructuring props with
  * defineProps().
diff --git a/packages/runtime-core/src/componentProps.ts b/packages/runtime-core/src/componentProps.ts
index 186384d5b82..887ce4f39c6 100644
--- a/packages/runtime-core/src/componentProps.ts
+++ b/packages/runtime-core/src/componentProps.ts
@@ -627,7 +627,7 @@ function validateProp(
     return
   }
   // missing but optional
-  if (value == null && !prop.required) {
+  if (value == null && !required) {
     return
   }
   // type check
diff --git a/packages/runtime-core/src/index.ts b/packages/runtime-core/src/index.ts
index 2001706057b..fc91da4c384 100644
--- a/packages/runtime-core/src/index.ts
+++ b/packages/runtime-core/src/index.ts
@@ -77,6 +77,7 @@ export {
   // internal
   mergeDefaults,
   mergeModelsOptions,
+  addRequiredToModels,
   createPropsRestProxy,
   withAsyncContext
 } from './apiSetupHelpers'

From 3550a159fcae6b277b26f2401cfa59f7703abeee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?=
 <sxzz@sxzz.moe>
Date: Thu, 6 Apr 2023 05:37:44 +0800
Subject: [PATCH 15/26] fix: compiler

---
 .../__snapshots__/compileScript.spec.ts.snap     |  2 +-
 .../compiler-sfc/__tests__/compileScript.spec.ts |  2 +-
 packages/compiler-sfc/src/compileScript.ts       | 16 ++++++----------
 3 files changed, 8 insertions(+), 12 deletions(-)

diff --git a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
index d490d6d0951..1575d4df099 100644
--- a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
@@ -1670,7 +1670,7 @@ exports[`SFC compile <script setup> > with TypeScript > defineModel() > w/ produ
 
 export default /*#__PURE__*/_defineComponent({
   props: _addRequiredToModels({
-    \\"modelValue\\": Boolean,
+    \\"modelValue\\": { type: Boolean },
     \\"fn\\": {},
     \\"fnWithDefault\\": { type: Function, ...{ default: () => null } },
     \\"str\\": {},
diff --git a/packages/compiler-sfc/__tests__/compileScript.spec.ts b/packages/compiler-sfc/__tests__/compileScript.spec.ts
index 4984477cd6a..9d5f8279922 100644
--- a/packages/compiler-sfc/__tests__/compileScript.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScript.spec.ts
@@ -1834,7 +1834,7 @@ const emit = defineEmits(['a', 'b'])
           { defineModel: true, isProd: true }
         )
         assertCode(content)
-        expect(content).toMatch('"modelValue": Boolean')
+        expect(content).toMatch('"modelValue": { type: Boolean }')
         expect(content).toMatch('"fn": {}')
         expect(content).toMatch(
           '"fnWithDefault": { type: Function, ...{ default: () => null } },'
diff --git a/packages/compiler-sfc/src/compileScript.ts b/packages/compiler-sfc/src/compileScript.ts
index 1f86bdb98e6..a254962b105 100644
--- a/packages/compiler-sfc/src/compileScript.ts
+++ b/packages/compiler-sfc/src/compileScript.ts
@@ -1037,19 +1037,15 @@ export function compileScript(
             runtimeTypes.length > 0 &&
             toRuntimeTypeString(runtimeTypes)) ||
           undefined
+        if (runtimeType) runtimeType = `type: ${runtimeType}`
 
         let decl: string
-        if (runtimeType && isProd && !options) {
-          decl = runtimeType
+        if (runtimeType && options) {
+          decl = isTS
+            ? `{ ${runtimeType}, ...${options} }`
+            : `Object.assign({ ${runtimeType} }, ${options})`
         } else {
-          if (runtimeType) runtimeType = `type: ${runtimeType}`
-          if (runtimeType && options) {
-            decl = isTS
-              ? `{ ${runtimeType}, ...${options} }`
-              : `Object.assign({ ${runtimeType} }, ${options})`
-          } else {
-            decl = options || (runtimeType ? `{ ${runtimeType} }` : '{}')
-          }
+          decl = options || (runtimeType ? `{ ${runtimeType} }` : '{}')
         }
         modelPropsDecl += `\n    ${JSON.stringify(name)}: ${decl},`
       }

From 43faf2eeee9781e99277e9ab412d2bc3d7f3bdba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?=
 <sxzz@sxzz.moe>
Date: Thu, 6 Apr 2023 06:04:04 +0800
Subject: [PATCH 16/26] fix: unknown type

---
 .../__snapshots__/compileScript.spec.ts.snap  |  6 +++--
 .../__tests__/compileScript.spec.ts           | 11 +++++---
 packages/compiler-sfc/src/compileScript.ts    | 27 ++++++++++++++-----
 3 files changed, 31 insertions(+), 13 deletions(-)

diff --git a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
index 1575d4df099..f6761843c1c 100644
--- a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
@@ -1650,16 +1650,18 @@ export default /*#__PURE__*/_defineComponent({
     \\"modelValue\\": { type: [Boolean, String] },
     \\"count\\": { type: Number },
     \\"disabled\\": { type: Number, ...{ required: false } },
+    \\"any\\": { type: Boolean, skipCheck: true },
   }),
-  emits: [\\"update:modelValue\\", \\"update:count\\", \\"update:disabled\\"],
+  emits: [\\"update:modelValue\\", \\"update:count\\", \\"update:disabled\\", \\"update:any\\"],
   setup(__props, { expose: __expose }) {
   __expose();
 
           const modelValue = _useModel(\\"modelValue\\")
           const count = _useModel(\\"count\\")
           const disabled = _useModel(\\"disabled\\")
+          const any = _useModel(\\"any\\")
           
-return { modelValue, count, disabled }
+return { modelValue, count, disabled, any }
 }
 
 })"
diff --git a/packages/compiler-sfc/__tests__/compileScript.spec.ts b/packages/compiler-sfc/__tests__/compileScript.spec.ts
index 9d5f8279922..c8eca65ef92 100644
--- a/packages/compiler-sfc/__tests__/compileScript.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScript.spec.ts
@@ -1794,6 +1794,7 @@ const emit = defineEmits(['a', 'b'])
           const modelValue = defineModel<boolean | string>()
           const count = defineModel<number>('count')
           const disabled = defineModel<number>('disabled', { required: false })
+          const any = defineModel<any | boolean>('any')
           </script>
           `,
           { defineModel: true }
@@ -1802,21 +1803,23 @@ const emit = defineEmits(['a', 'b'])
         expect(content).toMatch('"modelValue": { type: [Boolean, String] }')
         expect(content).toMatch('"count": { type: Number }')
         expect(content).toMatch(
-          '"disabled": { type: Number, ...{ required: false } },'
+          '"disabled": { type: Number, ...{ required: false } }'
         )
+        expect(content).toMatch('"any": { type: Boolean, skipCheck: true }')
         expect(content).toMatch(
-          'emits: ["update:modelValue", "update:count", "update:disabled"]'
+          'emits: ["update:modelValue", "update:count", "update:disabled", "update:any"]'
         )
 
         expect(content).toMatch(`const modelValue = _useModel("modelValue")`)
         expect(content).toMatch(`const count = _useModel("count")`)
         expect(content).toMatch(`const disabled = _useModel("disabled")`)
+        expect(content).toMatch(`const any = _useModel("any")`)
 
-        expect(content).toMatch(`const count = _useModel("count")`)
         expect(bindings).toStrictEqual({
           modelValue: BindingTypes.SETUP_REF,
           count: BindingTypes.SETUP_REF,
-          disabled: BindingTypes.SETUP_REF
+          disabled: BindingTypes.SETUP_REF,
+          any: BindingTypes.SETUP_REF
         })
       })
 
diff --git a/packages/compiler-sfc/src/compileScript.ts b/packages/compiler-sfc/src/compileScript.ts
index a254962b105..210a3fd6ac5 100644
--- a/packages/compiler-sfc/src/compileScript.ts
+++ b/packages/compiler-sfc/src/compileScript.ts
@@ -1026,26 +1026,39 @@ export function compileScript(
 
       let modelPropsDecl = ''
       for (const [name, { type, options }] of Object.entries(modelDecls)) {
+        let skipCheck = false
+
         let runtimeTypes = type && inferRuntimeType(type, declaredTypes)
-        if (runtimeTypes && isProd) {
-          runtimeTypes = runtimeTypes.filter(
-            el => el === 'Boolean' || (el === 'Function' && options)
-          )
+        if (runtimeTypes) {
+          const hasUnknownType = runtimeTypes.includes(UNKNOWN_TYPE)
+
+          runtimeTypes = runtimeTypes.filter(el => {
+            if (el === UNKNOWN_TYPE) return false
+            return isProd
+              ? el === 'Boolean' || (el === 'Function' && options)
+              : true
+          })
+          skipCheck = !isProd && hasUnknownType && runtimeTypes.length > 0
         }
+
         let runtimeType =
           (runtimeTypes &&
             runtimeTypes.length > 0 &&
             toRuntimeTypeString(runtimeTypes)) ||
           undefined
+        const skipCheckString = skipCheck ? ', skipCheck: true' : ''
+
         if (runtimeType) runtimeType = `type: ${runtimeType}`
 
         let decl: string
         if (runtimeType && options) {
           decl = isTS
-            ? `{ ${runtimeType}, ...${options} }`
-            : `Object.assign({ ${runtimeType} }, ${options})`
+            ? `{ ${runtimeType}${skipCheckString}, ...${options} }`
+            : `Object.assign({ ${runtimeType}${skipCheckString} }, ${options})`
         } else {
-          decl = options || (runtimeType ? `{ ${runtimeType} }` : '{}')
+          decl =
+            options ||
+            (runtimeType ? `{ ${runtimeType}${skipCheckString} }` : '{}')
         }
         modelPropsDecl += `\n    ${JSON.stringify(name)}: ${decl},`
       }

From a7481c09d1f0f0d54d7f8e217eaaf8b2b14b2e07 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?=
 <sxzz@sxzz.moe>
Date: Thu, 6 Apr 2023 19:31:29 +0800
Subject: [PATCH 17/26] fix: resolve PR comments

---
 packages/compiler-sfc/src/compileScript.ts   | 60 ++++++++++----------
 packages/dts-test/setupHelpers.test-d.ts     | 14 ++---
 packages/runtime-core/src/apiSetupHelpers.ts | 27 ++++-----
 3 files changed, 51 insertions(+), 50 deletions(-)

diff --git a/packages/compiler-sfc/src/compileScript.ts b/packages/compiler-sfc/src/compileScript.ts
index 210a3fd6ac5..9c02282a550 100644
--- a/packages/compiler-sfc/src/compileScript.ts
+++ b/packages/compiler-sfc/src/compileScript.ts
@@ -1197,6 +1197,34 @@ export function compileScript(
     }
   }
 
+  function genRuntimeEmits() {
+    function genEmitsFromTS() {
+      return typeDeclaredEmits.size
+        ? `[${Array.from(typeDeclaredEmits)
+            .map(k => JSON.stringify(k))
+            .join(', ')}]`
+        : ``
+    }
+
+    let emitsDecl = ''
+    if (emitsRuntimeDecl) {
+      emitsDecl = scriptSetup!.content
+        .slice(emitsRuntimeDecl.start!, emitsRuntimeDecl.end!)
+        .trim()
+    } else if (emitsTypeDecl) {
+      emitsDecl = genEmitsFromTS()
+    }
+    if (hasDefineModelCall) {
+      let modelEmitsDecl = `[${Object.keys(modelDecls)
+        .map(n => JSON.stringify(`update:${n}`))
+        .join(', ')}]`
+      emitsDecl = emitsDecl
+        ? `${helper('mergeModels')}(${emitsDecl}, ${modelEmitsDecl})`
+        : modelEmitsDecl
+    }
+    return emitsDecl
+  }
+
   // 0. parse both <script> and <script setup> blocks
   const scriptAst =
     script &&
@@ -1916,10 +1944,10 @@ export function compileScript(
     runtimeOptions += `\n  __ssrInlineRender: true,`
   }
 
-  let propsDecl = genRuntimeProps()
+  const propsDecl = genRuntimeProps()
   if (propsDecl) runtimeOptions += `\n  props: ${propsDecl},`
 
-  let emitsDecl = genRuntimeEmits()
+  const emitsDecl = genRuntimeEmits()
   if (emitsDecl) runtimeOptions += `\n  emits: ${emitsDecl},`
 
   let definedOptions = ''
@@ -2000,34 +2028,6 @@ export function compileScript(
     scriptAst: scriptAst?.body,
     scriptSetupAst: scriptSetupAst?.body
   }
-
-  function genRuntimeEmits() {
-    function genEmitsFromTS() {
-      return typeDeclaredEmits.size
-        ? `[${Array.from(typeDeclaredEmits)
-            .map(k => JSON.stringify(k))
-            .join(', ')}]`
-        : ``
-    }
-
-    let emitsDecl = ''
-    if (emitsRuntimeDecl) {
-      emitsDecl = scriptSetup!.content
-        .slice(emitsRuntimeDecl.start!, emitsRuntimeDecl.end!)
-        .trim()
-    } else if (emitsTypeDecl) {
-      emitsDecl = genEmitsFromTS()
-    }
-    if (hasDefineModelCall) {
-      let modelEmitsDecl = `[${Object.keys(modelDecls)
-        .map(n => JSON.stringify(`update:${n}`))
-        .join(', ')}]`
-      emitsDecl = emitsDecl
-        ? `${helper('mergeModels')}(${emitsDecl}, ${modelEmitsDecl})`
-        : modelEmitsDecl
-    }
-    return emitsDecl
-  }
 }
 
 function registerBinding(
diff --git a/packages/dts-test/setupHelpers.test-d.ts b/packages/dts-test/setupHelpers.test-d.ts
index 3eb258df050..f80392bcfd5 100644
--- a/packages/dts-test/setupHelpers.test-d.ts
+++ b/packages/dts-test/setupHelpers.test-d.ts
@@ -7,7 +7,7 @@ import {
   Slots,
   defineSlots,
   VNode,
-  WritableComputedRef,
+  Ref,
   defineModel
 } from 'vue'
 import { describe, expectType } from './utils'
@@ -207,26 +207,26 @@ describe('defineSlots', () => {
 describe('defineModel', () => {
   // overload 1
   const modelValueRequired = defineModel<boolean>({ required: false })
-  expectType<WritableComputedRef<boolean | undefined>>(modelValueRequired)
+  expectType<Ref<boolean | undefined>>(modelValueRequired)
 
   // overload 2
   const modelValue = defineModel<string>()
-  expectType<WritableComputedRef<string>>(modelValue)
+  expectType<Ref<string>>(modelValue)
   modelValue.value = 'new value'
 
   const modelValueDefault = defineModel<boolean>({ default: true })
-  expectType<WritableComputedRef<boolean>>(modelValueDefault)
+  expectType<Ref<boolean>>(modelValueDefault)
 
   // overload 3
   const countRequired = defineModel<number>('count', { required: false })
-  expectType<WritableComputedRef<number | undefined>>(countRequired)
+  expectType<Ref<number | undefined>>(countRequired)
 
   // overload 4
   const count = defineModel<number>('count')
-  expectType<WritableComputedRef<number>>(count)
+  expectType<Ref<number>>(count)
 
   const countDefault = defineModel<number>('count', { default: 1 })
-  expectType<WritableComputedRef<number>>(countDefault)
+  expectType<Ref<number>>(countDefault)
 })
 
 describe('useAttrs', () => {
diff --git a/packages/runtime-core/src/apiSetupHelpers.ts b/packages/runtime-core/src/apiSetupHelpers.ts
index cdef0e42102..1676da903d1 100644
--- a/packages/runtime-core/src/apiSetupHelpers.ts
+++ b/packages/runtime-core/src/apiSetupHelpers.ts
@@ -27,7 +27,7 @@ import {
 } from './componentProps'
 import { warn } from './warning'
 import { SlotsType, TypedSlots } from './componentSlots'
-import { WritableComputedRef, computed, ref } from '@vue/reactivity'
+import { Ref, ref } from '@vue/reactivity'
 import { watch } from './apiWatch'
 
 // dev only
@@ -238,18 +238,16 @@ export function defineSlots<
  */
 export function defineModel<T>(
   options: { required: false } & Record<string, unknown>
-): WritableComputedRef<T | undefined>
-export function defineModel<T>(
-  options?: Record<string, unknown>
-): WritableComputedRef<T>
+): Ref<T | undefined>
+export function defineModel<T>(options?: Record<string, unknown>): Ref<T>
 export function defineModel<T>(
   name: string,
   options: { required: false } & Record<string, unknown>
-): WritableComputedRef<T | undefined>
+): Ref<T | undefined>
 export function defineModel<T>(
   name: string,
   options?: Record<string, unknown>
-): WritableComputedRef<T>
+): Ref<T>
 export function defineModel(): any {
   if (__DEV__) {
     warnRuntimeUsage('defineModel')
@@ -317,7 +315,7 @@ export function useAttrs(): SetupContext['attrs'] {
   return getContext().attrs
 }
 
-export function useModel<T>(name: string): WritableComputedRef<T> {
+export function useModel<T>(name: string): Ref<T> {
   const i = getCurrentInstance()!
   if (__DEV__ && !i) {
     warn(`useModel() called without active instance.`)
@@ -341,14 +339,17 @@ export function useModel<T>(name: string): WritableComputedRef<T> {
 
     return proxy
   } else {
-    return computed<any>({
-      get() {
+    return {
+      __v_isRef: true,
+      get value() {
         return i.props[name]
       },
-      set(value) {
-        i.emit(`update:${name}`, value)
+      set value(value) {
+        if (value !== i.props[name]) {
+          i.emit(`update:${name}`, value)
+        }
       }
-    })
+    } as any
   }
 }
 

From b1d7c1ae68f1dbf2b83ecfe308e58969591bcb66 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?=
 <sxzz@sxzz.moe>
Date: Thu, 6 Apr 2023 19:46:18 +0800
Subject: [PATCH 18/26] refactor: omit `required: false`

---
 ...compileScriptPropsDestructure.spec.ts.snap | 12 ++---
 .../compileScriptPropsDestructure.spec.ts     | 12 ++---
 packages/compiler-sfc/src/compileScript.ts    | 46 +++++++++++--------
 3 files changed, 38 insertions(+), 32 deletions(-)

diff --git a/packages/compiler-sfc/__tests__/__snapshots__/compileScriptPropsDestructure.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/compileScriptPropsDestructure.spec.ts.snap
index b0140a3f23e..7449b315e0d 100644
--- a/packages/compiler-sfc/__tests__/__snapshots__/compileScriptPropsDestructure.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/compileScriptPropsDestructure.spec.ts.snap
@@ -121,12 +121,12 @@ exports[`sfc props transform > default values w/ type declaration, prod mode 1`]
 
 export default /*#__PURE__*/_defineComponent({
   props: {
-    foo: { required: false, default: 1 },
-    bar: { required: false, default: () => ({}) },
-    baz: { required: false },
-    boola: { type: Boolean, required: false },
-    boolb: { type: [Boolean, Number], required: false },
-    func: { type: Function, required: false, default: () => {} }
+    foo: { default: 1 },
+    bar: { default: () => ({}) },
+    baz: {  },
+    boola: { type: Boolean },
+    boolb: { type: [Boolean, Number] },
+    func: { type: Function, default: () => {} }
   },
   setup(__props: any) {
 
diff --git a/packages/compiler-sfc/__tests__/compileScriptPropsDestructure.spec.ts b/packages/compiler-sfc/__tests__/compileScriptPropsDestructure.spec.ts
index 163b635ad1e..8460d6d47c7 100644
--- a/packages/compiler-sfc/__tests__/compileScriptPropsDestructure.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScriptPropsDestructure.spec.ts
@@ -135,12 +135,12 @@ describe('sfc props transform', () => {
     // literals can be used as-is, non-literals are always returned from a
     // function
     expect(content).toMatch(`props: {
-    foo: { required: false, default: 1 },
-    bar: { required: false, default: () => ({}) },
-    baz: { required: false },
-    boola: { type: Boolean, required: false },
-    boolb: { type: [Boolean, Number], required: false },
-    func: { type: Function, required: false, default: () => {} }
+    foo: { default: 1 },
+    bar: { default: () => ({}) },
+    baz: {  },
+    boola: { type: Boolean },
+    boolb: { type: [Boolean, Number] },
+    func: { type: Function, default: () => {} }
   }`)
   })
 
diff --git a/packages/compiler-sfc/src/compileScript.ts b/packages/compiler-sfc/src/compileScript.ts
index 9c02282a550..2b75a8421b6 100644
--- a/packages/compiler-sfc/src/compileScript.ts
+++ b/packages/compiler-sfc/src/compileScript.ts
@@ -936,6 +936,10 @@ export function compileScript(
     )
   }
 
+  function concatStrings(strs: Array<string | null | undefined | false>) {
+    return strs.filter((s): s is string => !!s).join(', ')
+  }
+
   function genRuntimeProps() {
     function genPropsFromTS() {
       const keys = Object.keys(typeDeclaredProps)
@@ -982,11 +986,12 @@ export function compileScript(
 
         const { type, required, skipCheck } = typeDeclaredProps[key]
         if (!isProd) {
-          return `${key}: { type: ${toRuntimeTypeString(
-            type
-          )}, required: ${required}${skipCheck ? ', skipCheck: true' : ''}${
-            defaultString ? `, ${defaultString}` : ``
-          } }`
+          return `${key}: { ${concatStrings([
+            `type: ${toRuntimeTypeString(type)}`,
+            `required: ${required}`,
+            skipCheck && 'skipCheck: true',
+            defaultString
+          ])} }`
         } else if (
           type.some(
             el =>
@@ -997,16 +1002,17 @@ export function compileScript(
           // #4783 for boolean, should keep the type
           // #7111 for function, if default value exists or it's not static, should keep it
           // in production
-          return `${key}: { type: ${toRuntimeTypeString(
-            type
-          )}, required: ${required}${
-            defaultString ? `, ${defaultString}` : ``
-          } }`
+          return `${key}: { ${concatStrings([
+            `type: ${toRuntimeTypeString(type)}`,
+            required && `required: ${required}`,
+            defaultString
+          ])} }`
         } else {
           // production: checks are useless
-          return `${key}: ${`{ required: ${required}${
-            defaultString ? `, ${defaultString}` : ``
-          } }`}`
+          return `${key}: ${`{ ${concatStrings([
+            required && `required: ${required}`,
+            defaultString
+          ])} }`}`
         }
       })
       .join(',\n    ')}\n  }`
@@ -1046,19 +1052,19 @@ export function compileScript(
             runtimeTypes.length > 0 &&
             toRuntimeTypeString(runtimeTypes)) ||
           undefined
-        const skipCheckString = skipCheck ? ', skipCheck: true' : ''
 
-        if (runtimeType) runtimeType = `type: ${runtimeType}`
+        const codegenOptions = concatStrings([
+          runtimeType && `type: ${runtimeType}`,
+          skipCheck && 'skipCheck: true'
+        ])
 
         let decl: string
         if (runtimeType && options) {
           decl = isTS
-            ? `{ ${runtimeType}${skipCheckString}, ...${options} }`
-            : `Object.assign({ ${runtimeType}${skipCheckString} }, ${options})`
+            ? `{ ${codegenOptions}, ...${options} }`
+            : `Object.assign({ ${codegenOptions} }, ${options})`
         } else {
-          decl =
-            options ||
-            (runtimeType ? `{ ${runtimeType}${skipCheckString} }` : '{}')
+          decl = options || (runtimeType ? `{ ${codegenOptions} }` : '{}')
         }
         modelPropsDecl += `\n    ${JSON.stringify(name)}: ${decl},`
       }

From ad04b27156035c4b4a4b63b50c63e0773246ac11 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?=
 <sxzz@sxzz.moe>
Date: Thu, 6 Apr 2023 19:47:10 +0800
Subject: [PATCH 19/26] chore: remove useless test

---
 packages/runtime-core/__tests__/apiSetupHelpers.spec.ts | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/packages/runtime-core/__tests__/apiSetupHelpers.spec.ts b/packages/runtime-core/__tests__/apiSetupHelpers.spec.ts
index f3d6fd794ca..863aac49009 100644
--- a/packages/runtime-core/__tests__/apiSetupHelpers.spec.ts
+++ b/packages/runtime-core/__tests__/apiSetupHelpers.spec.ts
@@ -225,9 +225,6 @@ describe('SFC <script setup> helpers', () => {
         })
       ).mount(root)
 
-      // it's a ComputedRef, so not passive
-      expect(foo.effect).not.toBeUndefined()
-
       expect(foo.value).toBe('')
       expect(msg.value).toBe('')
       expect(setValue).not.toBeCalled()
@@ -268,9 +265,6 @@ describe('SFC <script setup> helpers', () => {
       const updateFoo = vi.fn()
       render(h(Comp, { 'onUpdate:foo': updateFoo }), root)
 
-      // it's a ComputedRef, so it's passive
-      expect(foo.effect).toBeUndefined()
-
       expect(foo.value).toBeUndefined()
       update()
 
@@ -298,9 +292,6 @@ describe('SFC <script setup> helpers', () => {
       const updateCount = vi.fn()
       render(h(Comp, { 'onUpdate:count': updateCount }), root)
 
-      // it's a ComputedRef, so it's passive
-      expect(count.effect).toBeUndefined()
-
       expect(count.value).toBe(0)
 
       inc()

From 57de8d1fb8bbab078eefd7acd76ad8afda992f92 Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Fri, 7 Apr 2023 11:04:13 +0800
Subject: [PATCH 20/26] fix: fix mergeModels helper name

---
 .../runtime-core/__tests__/apiSetupHelpers.spec.ts   | 12 ++++++------
 packages/runtime-core/src/apiSetupHelpers.ts         |  2 +-
 packages/runtime-core/src/index.ts                   |  2 +-
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/runtime-core/__tests__/apiSetupHelpers.spec.ts b/packages/runtime-core/__tests__/apiSetupHelpers.spec.ts
index 863aac49009..674a7acdfd9 100644
--- a/packages/runtime-core/__tests__/apiSetupHelpers.spec.ts
+++ b/packages/runtime-core/__tests__/apiSetupHelpers.spec.ts
@@ -27,7 +27,7 @@ import {
   mergeDefaults,
   withAsyncContext,
   createPropsRestProxy,
-  mergeModelsOptions,
+  mergeModels,
   useModel,
   addRequiredToModels
 } from '../src/apiSetupHelpers'
@@ -138,9 +138,9 @@ describe('SFC <script setup> helpers', () => {
     })
   })
 
-  describe('mergeModelsOptions', () => {
+  describe('mergeModels', () => {
     test('array syntax', () => {
-      expect(mergeModelsOptions(['foo', 'bar'], ['baz'])).toMatchObject([
+      expect(mergeModels(['foo', 'bar'], ['baz'])).toMatchObject([
         'foo',
         'bar',
         'baz'
@@ -149,7 +149,7 @@ describe('SFC <script setup> helpers', () => {
 
     test('object syntax', () => {
       expect(
-        mergeModelsOptions({ foo: null, bar: { required: true } }, ['baz'])
+        mergeModels({ foo: null, bar: { required: true } }, ['baz'])
       ).toMatchObject({
         foo: null,
         bar: { required: true },
@@ -157,7 +157,7 @@ describe('SFC <script setup> helpers', () => {
       })
 
       expect(
-        mergeModelsOptions(['baz'], { foo: null, bar: { required: true } })
+        mergeModels(['baz'], { foo: null, bar: { required: true } })
       ).toMatchObject({
         foo: null,
         bar: { required: true },
@@ -167,7 +167,7 @@ describe('SFC <script setup> helpers', () => {
 
     test('overwrite', () => {
       expect(
-        mergeModelsOptions(
+        mergeModels(
           { foo: null, bar: { required: true } },
           { bar: {}, baz: {} }
         )
diff --git a/packages/runtime-core/src/apiSetupHelpers.ts b/packages/runtime-core/src/apiSetupHelpers.ts
index 1676da903d1..04bd49cd2eb 100644
--- a/packages/runtime-core/src/apiSetupHelpers.ts
+++ b/packages/runtime-core/src/apiSetupHelpers.ts
@@ -406,7 +406,7 @@ export function mergeDefaults(
  * Imported by compiled code only.
  * @internal
  */
-export function mergeModelsOptions(
+export function mergeModels(
   a: ComponentPropsOptions | EmitsOptions,
   b: ComponentPropsOptions | EmitsOptions
 ) {
diff --git a/packages/runtime-core/src/index.ts b/packages/runtime-core/src/index.ts
index fc91da4c384..0e0896ee84e 100644
--- a/packages/runtime-core/src/index.ts
+++ b/packages/runtime-core/src/index.ts
@@ -76,7 +76,7 @@ export {
   useModel,
   // internal
   mergeDefaults,
-  mergeModelsOptions,
+  mergeModels,
   addRequiredToModels,
   createPropsRestProxy,
   withAsyncContext

From 61e5b2384dcbd8f22e24d77eee506b8e99b82c15 Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Fri, 7 Apr 2023 11:18:00 +0800
Subject: [PATCH 21/26] chore: small refactors

---
 packages/runtime-core/src/apiSetupHelpers.ts | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/runtime-core/src/apiSetupHelpers.ts b/packages/runtime-core/src/apiSetupHelpers.ts
index 04bd49cd2eb..c66118b324a 100644
--- a/packages/runtime-core/src/apiSetupHelpers.ts
+++ b/packages/runtime-core/src/apiSetupHelpers.ts
@@ -3,7 +3,8 @@ import {
   isPromise,
   isFunction,
   Prettify,
-  UnionToIntersection
+  UnionToIntersection,
+  extend
 } from '@vue/shared'
 import {
   getCurrentInstance,
@@ -412,7 +413,7 @@ export function mergeModels(
 ) {
   if (!a || !b) return a || b
   if (isArray(a) && isArray(b)) return a.concat(b)
-  return Object.assign({}, normalizePropsOrEmits(a), normalizePropsOrEmits(b))
+  return extend({}, normalizePropsOrEmits(a), normalizePropsOrEmits(b))
 }
 
 /**
@@ -422,8 +423,11 @@ export function mergeModels(
  */
 export function addRequiredToModels(options: ComponentObjectPropsOptions) {
   for (const key in options) {
-    if (!('required' in options[key]!) && !('default' in options[key]!)) {
-      ;(options[key] as any).required = true
+    // the model props object is generated by us so they are guaranteed to
+    // be objects
+    const prop = options[key]!
+    if (!('required' in prop) && !('default' in prop)) {
+      ;(prop as any).required = true
     }
   }
 

From 63fa911cab9c6c92476e503d56a48d251143d7f7 Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Fri, 7 Apr 2023 12:55:11 +0800
Subject: [PATCH 22/26] refactor: default useModel key + ensure prod/dev
 behavior consistency

---
 packages/runtime-core/src/apiSetupHelpers.ts | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/runtime-core/src/apiSetupHelpers.ts b/packages/runtime-core/src/apiSetupHelpers.ts
index c66118b324a..bc7bacf4fce 100644
--- a/packages/runtime-core/src/apiSetupHelpers.ts
+++ b/packages/runtime-core/src/apiSetupHelpers.ts
@@ -316,14 +316,19 @@ export function useAttrs(): SetupContext['attrs'] {
   return getContext().attrs
 }
 
-export function useModel<T>(name: string): Ref<T> {
+export function useModel<T>(name = 'modelValue'): Ref<T> {
   const i = getCurrentInstance()!
   if (__DEV__ && !i) {
     warn(`useModel() called without active instance.`)
-    return null as any
+    return ref() as any
   }
 
   const options = (i.propsOptions[0] as NormalizedProps)[name]
+  if (__DEV__ && !options) {
+    warn(`useModel() called with prop "${name}" which is not declared.`)
+    return ref() as any
+  }
+
   if (options && !options.required) {
     const proxy = ref<any>(i.props[name])
 

From b59baf86dd4faa43b9cefccff1d18ecd6640c8bd Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Fri, 7 Apr 2023 13:31:09 +0800
Subject: [PATCH 23/26] refactor: still make name required for useModel

---
 packages/runtime-core/src/apiSetupHelpers.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/runtime-core/src/apiSetupHelpers.ts b/packages/runtime-core/src/apiSetupHelpers.ts
index bc7bacf4fce..48f0a96a6fe 100644
--- a/packages/runtime-core/src/apiSetupHelpers.ts
+++ b/packages/runtime-core/src/apiSetupHelpers.ts
@@ -316,7 +316,7 @@ export function useAttrs(): SetupContext['attrs'] {
   return getContext().attrs
 }
 
-export function useModel<T>(name = 'modelValue'): Ref<T> {
+export function useModel<T>(name: string): Ref<T> {
   const i = getCurrentInstance()!
   if (__DEV__ && !i) {
     warn(`useModel() called without active instance.`)

From 29e3a93c4d4769f3704d1bef2eb558ff736a7b7b Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Fri, 7 Apr 2023 14:50:27 +0800
Subject: [PATCH 24/26] feat: improve defineModel typing

---
 packages/dts-test/setupHelpers.test-d.ts     | 11 +++++++++++
 packages/runtime-core/src/apiSetupHelpers.ts | 14 ++++++--------
 2 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/packages/dts-test/setupHelpers.test-d.ts b/packages/dts-test/setupHelpers.test-d.ts
index f80392bcfd5..54ff3b4f4b1 100644
--- a/packages/dts-test/setupHelpers.test-d.ts
+++ b/packages/dts-test/setupHelpers.test-d.ts
@@ -227,6 +227,17 @@ describe('defineModel', () => {
 
   const countDefault = defineModel<number>('count', { default: 1 })
   expectType<Ref<number>>(countDefault)
+
+  // infer type from default
+  const inferred = defineModel({ default: 123 })
+  expectType<Ref<number>>(inferred)
+  const inferredOptional = defineModel({ default: 123, required: false })
+  expectType<Ref<number | undefined>>(inferredOptional)
+
+  // @ts-expect-error type / default mismatch
+  defineModel<string>({ default: 123 })
+  // @ts-expect-error unknown props option
+  defineModel({ foo: 123 })
 })
 
 describe('useAttrs', () => {
diff --git a/packages/runtime-core/src/apiSetupHelpers.ts b/packages/runtime-core/src/apiSetupHelpers.ts
index 48f0a96a6fe..9a7c09e3c1b 100644
--- a/packages/runtime-core/src/apiSetupHelpers.ts
+++ b/packages/runtime-core/src/apiSetupHelpers.ts
@@ -24,7 +24,8 @@ import {
   ComponentPropsOptions,
   ComponentObjectPropsOptions,
   ExtractPropTypes,
-  NormalizedProps
+  NormalizedProps,
+  PropOptions
 } from './componentProps'
 import { warn } from './warning'
 import { SlotsType, TypedSlots } from './componentSlots'
@@ -238,17 +239,14 @@ export function defineSlots<
  *
  */
 export function defineModel<T>(
-  options: { required: false } & Record<string, unknown>
+  options: { required: false } & PropOptions<T>
 ): Ref<T | undefined>
-export function defineModel<T>(options?: Record<string, unknown>): Ref<T>
+export function defineModel<T>(options?: PropOptions<T>): Ref<T>
 export function defineModel<T>(
   name: string,
-  options: { required: false } & Record<string, unknown>
+  options: { required: false } & PropOptions<T>
 ): Ref<T | undefined>
-export function defineModel<T>(
-  name: string,
-  options?: Record<string, unknown>
-): Ref<T>
+export function defineModel<T>(name: string, options?: PropOptions<T>): Ref<T>
 export function defineModel(): any {
   if (__DEV__) {
     warnRuntimeUsage('defineModel')

From b2c12695281ba5f4d8d6bfb5d1d3599df0bb7c5f Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Fri, 7 Apr 2023 18:41:24 +0800
Subject: [PATCH 25/26] refactor: decouple props required option and local mode

---
 .../__snapshots__/compileScript.spec.ts.snap  | 104 ++++++++++++------
 ...compileScriptPropsDestructure.spec.ts.snap |   2 +-
 .../__tests__/compileScript.spec.ts           |  79 +++++++++----
 .../compileScriptPropsDestructure.spec.ts     |   2 +-
 packages/compiler-sfc/src/compileScript.ts    |  48 ++++++--
 packages/dts-test/setupHelpers.test-d.ts      |  46 ++++++--
 .../__tests__/apiSetupHelpers.spec.ts         |  39 ++-----
 packages/runtime-core/src/apiSetupHelpers.ts  |  70 ++++++------
 packages/runtime-core/src/index.ts            |   1 -
 9 files changed, 249 insertions(+), 142 deletions(-)

diff --git a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
index f6761843c1c..284f896b8df 100644
--- a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
@@ -654,19 +654,19 @@ return {  }
 `;
 
 exports[`SFC compile <script setup> > defineModel() > basic usage 1`] = `
-"import { useModel as _useModel, addRequiredToModels as _addRequiredToModels } from 'vue'
+"import { useModel as _useModel } from 'vue'
 
 export default {
-  props: _addRequiredToModels({
+  props: {
     \\"modelValue\\": { required: true },
     \\"count\\": {},
-  }),
+  },
   emits: [\\"update:modelValue\\", \\"update:count\\"],
   setup(__props, { expose: __expose }) {
   __expose();
 
-        const modelValue = _useModel(\\"modelValue\\")
-        const c = _useModel(\\"count\\")
+        const modelValue = _useModel(__props, \\"modelValue\\")
+        const c = _useModel(__props, \\"count\\")
         
 return { modelValue, c }
 }
@@ -675,18 +675,18 @@ return { modelValue, c }
 `;
 
 exports[`SFC compile <script setup> > defineModel() > w/ array props 1`] = `
-"import { useModel as _useModel, addRequiredToModels as _addRequiredToModels, mergeModels as _mergeModels } from 'vue'
+"import { useModel as _useModel, mergeModels as _mergeModels } from 'vue'
 
 export default {
-  props: _mergeModels(['foo', 'bar'], _addRequiredToModels({
+  props: _mergeModels(['foo', 'bar'], {
     \\"count\\": {},
-  })),
+  }),
   emits: [\\"update:count\\"],
   setup(__props, { expose: __expose }) {
   __expose();
 
         
-        const count = _useModel(\\"count\\")
+        const count = _useModel(__props, \\"count\\")
         
 return { count }
 }
@@ -695,19 +695,19 @@ return { count }
 `;
 
 exports[`SFC compile <script setup> > defineModel() > w/ defineProps and defineEmits 1`] = `
-"import { useModel as _useModel, addRequiredToModels as _addRequiredToModels, mergeModels as _mergeModels } from 'vue'
+"import { useModel as _useModel, mergeModels as _mergeModels } from 'vue'
 
 export default {
-  props: _mergeModels({ foo: String }, _addRequiredToModels({
+  props: _mergeModels({ foo: String }, {
     \\"modelValue\\": { default: 0 },
-  })),
+  }),
   emits: _mergeModels(['change'], [\\"update:modelValue\\"]),
   setup(__props, { expose: __expose }) {
   __expose();
 
         
         
-        const count = _useModel(\\"modelValue\\")
+        const count = _useModel(__props, \\"modelValue\\")
         
 return { count }
 }
@@ -715,6 +715,38 @@ return { count }
 }"
 `;
 
+exports[`SFC compile <script setup> > defineModel() > w/ local flag 1`] = `
+"import { useModel as _useModel } from 'vue'
+const local = true
+        
+export default {
+  props: {
+    \\"modelValue\\": { local: true, default: 1 },
+    \\"bar\\": { [key]: true },
+    \\"baz\\": { ...x },
+    \\"qux\\": x,
+    \\"foo2\\": { local: true, ...x },
+    \\"hoist\\": { local },
+  },
+  emits: [\\"update:modelValue\\", \\"update:bar\\", \\"update:baz\\", \\"update:qux\\", \\"update:foo2\\", \\"update:hoist\\"],
+  setup(__props, { expose: __expose }) {
+  __expose();
+
+        const foo = _useModel(__props, \\"modelValue\\", { local: true })
+        const bar = _useModel(__props, \\"bar\\", { [key]: true })
+        const baz = _useModel(__props, \\"baz\\", { ...x })
+        const qux = _useModel(__props, \\"qux\\", x)
+
+        const foo2 = _useModel(__props, \\"foo2\\", { local: true })
+
+        const hoist = _useModel(__props, \\"hoist\\", { local })
+        
+return { foo, bar, baz, qux, foo2, local, hoist }
+}
+
+}"
+`;
+
 exports[`SFC compile <script setup> > defineOptions() > basic usage 1`] = `
 "export default /*#__PURE__*/Object.assign({ name: 'FooApp' }, {
   setup(__props, { expose: __expose }) {
@@ -1643,23 +1675,23 @@ return { emit }
 `;
 
 exports[`SFC compile <script setup> > with TypeScript > defineModel() > basic usage 1`] = `
-"import { useModel as _useModel, addRequiredToModels as _addRequiredToModels, defineComponent as _defineComponent } from 'vue'
+"import { useModel as _useModel, defineComponent as _defineComponent } from 'vue'
 
 export default /*#__PURE__*/_defineComponent({
-  props: _addRequiredToModels({
+  props: {
     \\"modelValue\\": { type: [Boolean, String] },
     \\"count\\": { type: Number },
     \\"disabled\\": { type: Number, ...{ required: false } },
     \\"any\\": { type: Boolean, skipCheck: true },
-  }),
+  },
   emits: [\\"update:modelValue\\", \\"update:count\\", \\"update:disabled\\", \\"update:any\\"],
   setup(__props, { expose: __expose }) {
   __expose();
 
-          const modelValue = _useModel(\\"modelValue\\")
-          const count = _useModel(\\"count\\")
-          const disabled = _useModel(\\"disabled\\")
-          const any = _useModel(\\"any\\")
+          const modelValue = _useModel(__props, \\"modelValue\\")
+          const count = _useModel(__props, \\"count\\")
+          const disabled = _useModel(__props, \\"disabled\\")
+          const any = _useModel(__props, \\"any\\")
           
 return { modelValue, count, disabled, any }
 }
@@ -1668,25 +1700,25 @@ return { modelValue, count, disabled, any }
 `;
 
 exports[`SFC compile <script setup> > with TypeScript > defineModel() > w/ production mode 1`] = `
-"import { useModel as _useModel, addRequiredToModels as _addRequiredToModels, defineComponent as _defineComponent } from 'vue'
+"import { useModel as _useModel, defineComponent as _defineComponent } from 'vue'
 
 export default /*#__PURE__*/_defineComponent({
-  props: _addRequiredToModels({
+  props: {
     \\"modelValue\\": { type: Boolean },
     \\"fn\\": {},
     \\"fnWithDefault\\": { type: Function, ...{ default: () => null } },
     \\"str\\": {},
     \\"optional\\": { required: false },
-  }),
+  },
   emits: [\\"update:modelValue\\", \\"update:fn\\", \\"update:fnWithDefault\\", \\"update:str\\", \\"update:optional\\"],
   setup(__props, { expose: __expose }) {
   __expose();
 
-          const modelValue = _useModel(\\"modelValue\\")
-          const fn = _useModel(\\"fn\\")
-          const fnWithDefault = _useModel(\\"fnWithDefault\\")
-          const str = _useModel(\\"str\\")
-          const optional = _useModel(\\"optional\\")
+          const modelValue = _useModel(__props, \\"modelValue\\")
+          const fn = _useModel(__props, \\"fn\\")
+          const fnWithDefault = _useModel(__props, \\"fnWithDefault\\")
+          const str = _useModel(__props, \\"str\\")
+          const optional = _useModel(__props, \\"optional\\")
           
 return { modelValue, fn, fnWithDefault, str, optional }
 }
@@ -2056,10 +2088,10 @@ import { defaults } from './foo'
       
 export default /*#__PURE__*/_defineComponent({
   props: _mergeDefaults({
-    foo: { type: Function, required: true },
-    bar: { type: Boolean, required: true },
-    baz: { type: [Boolean, Function], required: true },
-    qux: { required: true }
+    foo: { type: Function },
+    bar: { type: Boolean },
+    baz: { type: [Boolean, Function] },
+    qux: {}
   }, { ...defaults }),
   setup(__props: any, { expose: __expose }) {
   __expose();
@@ -2161,10 +2193,10 @@ exports[`SFC compile <script setup> > with TypeScript > withDefaults (static) w/
 
 export default /*#__PURE__*/_defineComponent({
   props: {
-    foo: { required: true },
-    bar: { type: Boolean, required: true },
-    baz: { type: [Boolean, Function], required: true, default: true },
-    qux: { required: true, default: 'hi' }
+    foo: {},
+    bar: { type: Boolean },
+    baz: { type: [Boolean, Function], default: true },
+    qux: { default: 'hi' }
   },
   setup(__props: any, { expose: __expose }) {
   __expose();
diff --git a/packages/compiler-sfc/__tests__/__snapshots__/compileScriptPropsDestructure.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/compileScriptPropsDestructure.spec.ts.snap
index 7449b315e0d..37c334e838d 100644
--- a/packages/compiler-sfc/__tests__/__snapshots__/compileScriptPropsDestructure.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/compileScriptPropsDestructure.spec.ts.snap
@@ -123,7 +123,7 @@ export default /*#__PURE__*/_defineComponent({
   props: {
     foo: { default: 1 },
     bar: { default: () => ({}) },
-    baz: {  },
+    baz: {},
     boola: { type: Boolean },
     boolb: { type: [Boolean, Number] },
     func: { type: Function, default: () => {} }
diff --git a/packages/compiler-sfc/__tests__/compileScript.spec.ts b/packages/compiler-sfc/__tests__/compileScript.spec.ts
index c8eca65ef92..0ed41cd9109 100644
--- a/packages/compiler-sfc/__tests__/compileScript.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScript.spec.ts
@@ -377,12 +377,14 @@ defineExpose({ foo: 123 })
         { defineModel: true }
       )
       assertCode(content)
-      expect(content).toMatch('props: _addRequiredToModels({')
+      expect(content).toMatch('props: {')
       expect(content).toMatch('"modelValue": { required: true },')
       expect(content).toMatch('"count": {},')
       expect(content).toMatch('emits: ["update:modelValue", "update:count"],')
-      expect(content).toMatch(`const modelValue = _useModel("modelValue")`)
-      expect(content).toMatch(`const c = _useModel("count")`)
+      expect(content).toMatch(
+        `const modelValue = _useModel(__props, "modelValue")`
+      )
+      expect(content).toMatch(`const c = _useModel(__props, "count")`)
       expect(content).toMatch(`return { modelValue, c }`)
       expect(content).not.toMatch('defineModel')
 
@@ -407,7 +409,7 @@ defineExpose({ foo: 123 })
       assertCode(content)
       expect(content).toMatch(`props: _mergeModels({ foo: String }`)
       expect(content).toMatch(`"modelValue": { default: 0 }`)
-      expect(content).toMatch(`const count = _useModel("modelValue")`)
+      expect(content).toMatch(`const count = _useModel(__props, "modelValue")`)
       expect(content).not.toMatch('defineModel')
       expect(bindings).toStrictEqual({
         count: BindingTypes.SETUP_REF,
@@ -427,11 +429,10 @@ defineExpose({ foo: 123 })
         { defineModel: true }
       )
       assertCode(content)
-      expect(content)
-        .toMatch(`props: _mergeModels(['foo', 'bar'], _addRequiredToModels({
+      expect(content).toMatch(`props: _mergeModels(['foo', 'bar'], {
     "count": {},
-  }))`)
-      expect(content).toMatch(`const count = _useModel("count")`)
+  })`)
+      expect(content).toMatch(`const count = _useModel(__props, "count")`)
       expect(content).not.toMatch('defineModel')
       expect(bindings).toStrictEqual({
         foo: BindingTypes.PROPS,
@@ -439,6 +440,32 @@ defineExpose({ foo: 123 })
         count: BindingTypes.SETUP_REF
       })
     })
+
+    test('w/ local flag', () => {
+      const { content } = compile(
+        `<script setup>
+        const foo = defineModel({ local: true, default: 1 })
+        const bar = defineModel('bar', { [key]: true })
+        const baz = defineModel('baz', { ...x })
+        const qux = defineModel('qux', x)
+
+        const foo2 = defineModel('foo2', { local: true, ...x })
+
+        const local = true
+        const hoist = defineModel('hoist', { local })
+        </script>`,
+        { defineModel: true }
+      )
+      assertCode(content)
+      expect(content).toMatch(
+        `_useModel(__props, "modelValue", { local: true })`
+      )
+      expect(content).toMatch(`_useModel(__props, "bar", { [key]: true })`)
+      expect(content).toMatch(`_useModel(__props, "baz", { ...x })`)
+      expect(content).toMatch(`_useModel(__props, "qux", x)`)
+      expect(content).toMatch(`_useModel(__props, "foo2", { local: true })`)
+      expect(content).toMatch(`_useModel(__props, "hoist", { local })`)
+    })
   })
 
   test('<script> after <script setup> the script content not end with `\\n`', () => {
@@ -1509,12 +1536,12 @@ const emit = defineEmits(['a', 'b'])
       expect(content).toMatch(`const props = __props`)
 
       // foo has no default value, the Function can be dropped
-      expect(content).toMatch(`foo: { required: true }`)
-      expect(content).toMatch(`bar: { type: Boolean, required: true }`)
+      expect(content).toMatch(`foo: {}`)
+      expect(content).toMatch(`bar: { type: Boolean }`)
       expect(content).toMatch(
-        `baz: { type: [Boolean, Function], required: true, default: true }`
+        `baz: { type: [Boolean, Function], default: true }`
       )
-      expect(content).toMatch(`qux: { required: true, default: 'hi' }`)
+      expect(content).toMatch(`qux: { default: 'hi' }`)
     })
 
     test('withDefaults (dynamic)', () => {
@@ -1584,10 +1611,10 @@ const emit = defineEmits(['a', 'b'])
       expect(content).toMatch(
         `
   _mergeDefaults({
-    foo: { type: Function, required: true },
-    bar: { type: Boolean, required: true },
-    baz: { type: [Boolean, Function], required: true },
-    qux: { required: true }
+    foo: { type: Function },
+    bar: { type: Boolean },
+    baz: { type: [Boolean, Function] },
+    qux: {}
   }, { ...defaults })`.trim()
       )
     })
@@ -1810,10 +1837,14 @@ const emit = defineEmits(['a', 'b'])
           'emits: ["update:modelValue", "update:count", "update:disabled", "update:any"]'
         )
 
-        expect(content).toMatch(`const modelValue = _useModel("modelValue")`)
-        expect(content).toMatch(`const count = _useModel("count")`)
-        expect(content).toMatch(`const disabled = _useModel("disabled")`)
-        expect(content).toMatch(`const any = _useModel("any")`)
+        expect(content).toMatch(
+          `const modelValue = _useModel(__props, "modelValue")`
+        )
+        expect(content).toMatch(`const count = _useModel(__props, "count")`)
+        expect(content).toMatch(
+          `const disabled = _useModel(__props, "disabled")`
+        )
+        expect(content).toMatch(`const any = _useModel(__props, "any")`)
 
         expect(bindings).toStrictEqual({
           modelValue: BindingTypes.SETUP_REF,
@@ -1847,9 +1878,11 @@ const emit = defineEmits(['a', 'b'])
         expect(content).toMatch(
           'emits: ["update:modelValue", "update:fn", "update:fnWithDefault", "update:str", "update:optional"]'
         )
-        expect(content).toMatch(`const modelValue = _useModel("modelValue")`)
-        expect(content).toMatch(`const fn = _useModel("fn")`)
-        expect(content).toMatch(`const str = _useModel("str")`)
+        expect(content).toMatch(
+          `const modelValue = _useModel(__props, "modelValue")`
+        )
+        expect(content).toMatch(`const fn = _useModel(__props, "fn")`)
+        expect(content).toMatch(`const str = _useModel(__props, "str")`)
         expect(bindings).toStrictEqual({
           modelValue: BindingTypes.SETUP_REF,
           fn: BindingTypes.SETUP_REF,
diff --git a/packages/compiler-sfc/__tests__/compileScriptPropsDestructure.spec.ts b/packages/compiler-sfc/__tests__/compileScriptPropsDestructure.spec.ts
index 8460d6d47c7..e00d7d48b97 100644
--- a/packages/compiler-sfc/__tests__/compileScriptPropsDestructure.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScriptPropsDestructure.spec.ts
@@ -137,7 +137,7 @@ describe('sfc props transform', () => {
     expect(content).toMatch(`props: {
     foo: { default: 1 },
     bar: { default: () => ({}) },
-    baz: {  },
+    baz: {},
     boola: { type: Boolean },
     boolb: { type: [Boolean, Number] },
     func: { type: Function, default: () => {} }
diff --git a/packages/compiler-sfc/src/compileScript.ts b/packages/compiler-sfc/src/compileScript.ts
index 2b75a8421b6..158c524f4b9 100644
--- a/packages/compiler-sfc/src/compileScript.ts
+++ b/packages/compiler-sfc/src/compileScript.ts
@@ -651,19 +651,51 @@ export function compileScript(
       error(`duplicate model name ${JSON.stringify(modelName)}`, node)
     }
 
+    const optionsString = options
+      ? s.slice(startOffset + options.start!, startOffset + options.end!)
+      : undefined
+
     modelDecls[modelName] = {
       type,
-      options: options
-        ? s.slice(startOffset + options.start!, startOffset + options.end!)
-        : undefined,
+      options: optionsString,
       identifier:
         declId && declId.type === 'Identifier' ? declId.name : undefined
     }
 
+    let runtimeOptions = ''
+    if (options) {
+      if (options.type === 'ObjectExpression') {
+        const local = options.properties.find(
+          p =>
+            p.type === 'ObjectProperty' &&
+            ((p.key.type === 'Identifier' && p.key.name === 'local') ||
+              (p.key.type === 'StringLiteral' && p.key.value === 'local'))
+        ) as ObjectProperty
+
+        if (local) {
+          runtimeOptions = `{ ${s.slice(
+            startOffset + local.start!,
+            startOffset + local.end!
+          )} }`
+        } else {
+          for (const p of options.properties) {
+            if (p.type === 'SpreadElement' || p.computed) {
+              runtimeOptions = optionsString!
+              break
+            }
+          }
+        }
+      } else {
+        runtimeOptions = optionsString!
+      }
+    }
+
     s.overwrite(
       startOffset + node.start!,
       startOffset + node.end!,
-      `${helper('useModel')}(${JSON.stringify(modelName)})`
+      `${helper('useModel')}(__props, ${JSON.stringify(modelName)}${
+        runtimeOptions ? `, ${runtimeOptions}` : ``
+      })`
     )
 
     return true
@@ -1004,15 +1036,11 @@ export function compileScript(
           // in production
           return `${key}: { ${concatStrings([
             `type: ${toRuntimeTypeString(type)}`,
-            required && `required: ${required}`,
             defaultString
           ])} }`
         } else {
           // production: checks are useless
-          return `${key}: ${`{ ${concatStrings([
-            required && `required: ${required}`,
-            defaultString
-          ])} }`}`
+          return `${key}: ${defaultString ? `{ ${defaultString} }` : `{}`}`
         }
       })
       .join(',\n    ')}\n  }`
@@ -1068,7 +1096,7 @@ export function compileScript(
         }
         modelPropsDecl += `\n    ${JSON.stringify(name)}: ${decl},`
       }
-      return `${helper('addRequiredToModels')}({${modelPropsDecl}\n  })`
+      return `{${modelPropsDecl}\n  }`
     }
 
     let propsDecls: undefined | string
diff --git a/packages/dts-test/setupHelpers.test-d.ts b/packages/dts-test/setupHelpers.test-d.ts
index 54ff3b4f4b1..f738e58b9eb 100644
--- a/packages/dts-test/setupHelpers.test-d.ts
+++ b/packages/dts-test/setupHelpers.test-d.ts
@@ -11,6 +11,8 @@ import {
   defineModel
 } from 'vue'
 import { describe, expectType } from './utils'
+import { defineComponent } from 'vue'
+import { useModel } from 'vue'
 
 describe('defineProps w/ type declaration', () => {
   // type declaration
@@ -206,12 +208,12 @@ describe('defineSlots', () => {
 
 describe('defineModel', () => {
   // overload 1
-  const modelValueRequired = defineModel<boolean>({ required: false })
-  expectType<Ref<boolean | undefined>>(modelValueRequired)
+  const modelValueRequired = defineModel<boolean>({ required: true })
+  expectType<Ref<boolean>>(modelValueRequired)
 
   // overload 2
   const modelValue = defineModel<string>()
-  expectType<Ref<string>>(modelValue)
+  expectType<Ref<string | undefined>>(modelValue)
   modelValue.value = 'new value'
 
   const modelValueDefault = defineModel<boolean>({ default: true })
@@ -223,21 +225,51 @@ describe('defineModel', () => {
 
   // overload 4
   const count = defineModel<number>('count')
-  expectType<Ref<number>>(count)
+  expectType<Ref<number | undefined>>(count)
 
   const countDefault = defineModel<number>('count', { default: 1 })
   expectType<Ref<number>>(countDefault)
 
   // infer type from default
   const inferred = defineModel({ default: 123 })
-  expectType<Ref<number>>(inferred)
-  const inferredOptional = defineModel({ default: 123, required: false })
-  expectType<Ref<number | undefined>>(inferredOptional)
+  expectType<Ref<number | undefined>>(inferred)
+  const inferredRequired = defineModel({ default: 123, required: true })
+  expectType<Ref<number>>(inferredRequired)
 
   // @ts-expect-error type / default mismatch
   defineModel<string>({ default: 123 })
   // @ts-expect-error unknown props option
   defineModel({ foo: 123 })
+
+  // accept defineModel-only options
+  defineModel({ local: true })
+  defineModel('foo', { local: true })
+})
+
+describe('useModel', () => {
+  defineComponent({
+    props: ['foo'],
+    setup(props) {
+      const r = useModel(props, 'foo')
+      expectType<Ref<any>>(r)
+
+      // @ts-expect-error
+      useModel(props, 'bar')
+    }
+  })
+
+  defineComponent({
+    props: {
+      foo: String,
+      bar: { type: Number, required: true },
+      baz: { type: Boolean }
+    },
+    setup(props) {
+      expectType<Ref<string | undefined>>(useModel(props, 'foo'))
+      expectType<Ref<number>>(useModel(props, 'bar'))
+      expectType<Ref<boolean>>(useModel(props, 'baz'))
+    }
+  })
 })
 
 describe('useAttrs', () => {
diff --git a/packages/runtime-core/__tests__/apiSetupHelpers.spec.ts b/packages/runtime-core/__tests__/apiSetupHelpers.spec.ts
index 674a7acdfd9..f15e03ff01f 100644
--- a/packages/runtime-core/__tests__/apiSetupHelpers.spec.ts
+++ b/packages/runtime-core/__tests__/apiSetupHelpers.spec.ts
@@ -28,8 +28,7 @@ import {
   withAsyncContext,
   createPropsRestProxy,
   mergeModels,
-  useModel,
-  addRequiredToModels
+  useModel
 } from '../src/apiSetupHelpers'
 
 describe('SFC <script setup> helpers', () => {
@@ -179,24 +178,6 @@ describe('SFC <script setup> helpers', () => {
     })
   })
 
-  test('addRequiredToModels', () => {
-    expect(
-      addRequiredToModels({
-        foo: {},
-        bar: { required: false },
-        baz: { default: 1 },
-        qux: { required: false, default: 1 },
-        quux: { type: String }
-      })
-    ).toStrictEqual({
-      foo: { required: true },
-      bar: { required: false },
-      baz: { default: 1 },
-      qux: { required: false, default: 1 },
-      quux: { type: String, required: true }
-    })
-  })
-
   describe('useModel', () => {
     test('basic', async () => {
       let foo: any
@@ -205,12 +186,10 @@ describe('SFC <script setup> helpers', () => {
       }
 
       const Comp = defineComponent({
-        props: {
-          modelValue: { required: true }
-        },
+        props: ['modelValue'],
         emits: ['update:modelValue'],
-        setup() {
-          foo = useModel<string>('modelValue')
+        setup(props) {
+          foo = useModel(props, 'modelValue')
         },
         render() {}
       })
@@ -246,7 +225,7 @@ describe('SFC <script setup> helpers', () => {
       expect(setValue).toBeCalledTimes(1)
     })
 
-    test('optional', async () => {
+    test('local', async () => {
       let foo: any
       const update = () => {
         foo.value = 'bar'
@@ -255,8 +234,8 @@ describe('SFC <script setup> helpers', () => {
       const Comp = defineComponent({
         props: ['foo'],
         emits: ['update:foo'],
-        setup() {
-          foo = useModel<string>('foo')
+        setup(props) {
+          foo = useModel(props, 'foo', { local: true })
         },
         render() {}
       })
@@ -282,8 +261,8 @@ describe('SFC <script setup> helpers', () => {
       const Comp = defineComponent({
         props: { count: { default: 0 } },
         emits: ['update:count'],
-        setup() {
-          count = useModel<number>('count')
+        setup(props) {
+          count = useModel(props, 'count', { local: true })
         },
         render() {}
       })
diff --git a/packages/runtime-core/src/apiSetupHelpers.ts b/packages/runtime-core/src/apiSetupHelpers.ts
index 9a7c09e3c1b..6b2393766ec 100644
--- a/packages/runtime-core/src/apiSetupHelpers.ts
+++ b/packages/runtime-core/src/apiSetupHelpers.ts
@@ -239,20 +239,36 @@ export function defineSlots<
  *
  */
 export function defineModel<T>(
-  options: { required: false } & PropOptions<T>
+  options: { required: true } & PropOptions<T> & DefineModelOptions
+): Ref<T>
+export function defineModel<T>(
+  options: { default: any } & PropOptions<T> & DefineModelOptions
+): Ref<T>
+export function defineModel<T>(
+  options?: PropOptions<T> & DefineModelOptions
 ): Ref<T | undefined>
-export function defineModel<T>(options?: PropOptions<T>): Ref<T>
 export function defineModel<T>(
   name: string,
-  options: { required: false } & PropOptions<T>
+  options: { required: true } & PropOptions<T> & DefineModelOptions
+): Ref<T>
+export function defineModel<T>(
+  name: string,
+  options: { default: any } & PropOptions<T> & DefineModelOptions
+): Ref<T>
+export function defineModel<T>(
+  name: string,
+  options?: PropOptions<T> & DefineModelOptions
 ): Ref<T | undefined>
-export function defineModel<T>(name: string, options?: PropOptions<T>): Ref<T>
 export function defineModel(): any {
   if (__DEV__) {
     warnRuntimeUsage('defineModel')
   }
 }
 
+interface DefineModelOptions {
+  local?: boolean
+}
+
 type NotUndefined<T> = T extends undefined ? never : T
 
 type InferDefaults<T> = {
@@ -314,29 +330,37 @@ export function useAttrs(): SetupContext['attrs'] {
   return getContext().attrs
 }
 
-export function useModel<T>(name: string): Ref<T> {
+export function useModel<T extends Record<string, any>, K extends keyof T>(
+  props: T,
+  name: K,
+  options?: { local?: boolean }
+): Ref<T[K]>
+export function useModel(
+  props: Record<string, any>,
+  name: string,
+  options?: { local?: boolean }
+): Ref {
   const i = getCurrentInstance()!
   if (__DEV__ && !i) {
     warn(`useModel() called without active instance.`)
     return ref() as any
   }
 
-  const options = (i.propsOptions[0] as NormalizedProps)[name]
-  if (__DEV__ && !options) {
+  if (__DEV__ && !(i.propsOptions[0] as NormalizedProps)[name]) {
     warn(`useModel() called with prop "${name}" which is not declared.`)
     return ref() as any
   }
 
-  if (options && !options.required) {
-    const proxy = ref<any>(i.props[name])
+  if (options && options.local) {
+    const proxy = ref<any>(props[name])
 
     watch(
-      () => i.props[name],
+      () => props[name],
       v => (proxy.value = v)
     )
 
     watch(proxy, value => {
-      if (value !== i.props[name]) {
+      if (value !== props[name]) {
         i.emit(`update:${name}`, value)
       }
     })
@@ -346,12 +370,10 @@ export function useModel<T>(name: string): Ref<T> {
     return {
       __v_isRef: true,
       get value() {
-        return i.props[name]
+        return props[name]
       },
       set value(value) {
-        if (value !== i.props[name]) {
-          i.emit(`update:${name}`, value)
-        }
+        i.emit(`update:${name}`, value)
       }
     } as any
   }
@@ -419,24 +441,6 @@ export function mergeModels(
   return extend({}, normalizePropsOrEmits(a), normalizePropsOrEmits(b))
 }
 
-/**
- * Runtime helper for adding required to model declarations.
- * Imported by compiled code only.
- * @internal
- */
-export function addRequiredToModels(options: ComponentObjectPropsOptions) {
-  for (const key in options) {
-    // the model props object is generated by us so they are guaranteed to
-    // be objects
-    const prop = options[key]!
-    if (!('required' in prop) && !('default' in prop)) {
-      ;(prop as any).required = true
-    }
-  }
-
-  return options
-}
-
 /**
  * Used to create a proxy for the rest element when destructuring props with
  * defineProps().
diff --git a/packages/runtime-core/src/index.ts b/packages/runtime-core/src/index.ts
index 0e0896ee84e..e427773a70e 100644
--- a/packages/runtime-core/src/index.ts
+++ b/packages/runtime-core/src/index.ts
@@ -77,7 +77,6 @@ export {
   // internal
   mergeDefaults,
   mergeModels,
-  addRequiredToModels,
   createPropsRestProxy,
   withAsyncContext
 } from './apiSetupHelpers'

From 6f70962816e8c814edee32dcad474542bd2993ca Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Sat, 8 Apr 2023 11:59:50 +0800
Subject: [PATCH 26/26] chore: update defineModel comments doc

---
 packages/runtime-core/src/apiSetupHelpers.ts | 33 +++++++++++++-------
 1 file changed, 21 insertions(+), 12 deletions(-)

diff --git a/packages/runtime-core/src/apiSetupHelpers.ts b/packages/runtime-core/src/apiSetupHelpers.ts
index 6b2393766ec..e0fe434210f 100644
--- a/packages/runtime-core/src/apiSetupHelpers.ts
+++ b/packages/runtime-core/src/apiSetupHelpers.ts
@@ -213,30 +213,39 @@ export function defineSlots<
 }
 
 /**
- * (**Experimental**) Vue `<script setup>` compiler macro for declaring a two-way
- * binding prop. This will declare a prop with the same name and a corresponding
+ * (**Experimental**) Vue `<script setup>` compiler macro for declaring a
+ * two-way binding prop that can be consumed via `v-model` from the parent
+ * component. This will declare a prop with the same name and a corresponding
  * `update:propName` event.
  *
- * The prop will be automatically marked as `required` by default. Use the
- * `required: false` option or set a default value to make it optional.
+ * If the first argument is a string, it will be used as the prop name;
+ * Otherwise the prop name will default to "modelValue". In both cases, you
+ * can also pass an additional object which will be used as the prop's options.
  *
- * Example: required model
+ * The options object can also specify an additional option, `local`. When set
+ * to `true`, the ref can be locally mutated even if the parent did not pass
+ * the matching `v-model`.
+ *
+ * @example
  * ```ts
+ * // default model (consumed via `v-model`)
  * const modelValue = defineModel<string>()
  * modelValue.value = "hello"
- * ```
  *
- * Example: specified a name
- * ```ts
+ * // default model with options
+ * const modelValue = defineModel<stirng>({ required: true })
+ *
+ * // with specified name (consumed via `v-model:count`)
  * const count = defineModel<number>('count')
  * count.value++
- * ```
  *
- * Example: specified a name and default value
- * ```ts
+ * // with specified name and default value
  * const count = defineModel<number>('count', { default: 0 })
- * ```
  *
+ * // local mutable model, can be mutated locally
+ * // even if the parent did not pass the matching `v-model`.
+ * const count = defineModel<number>('count', { local: true, default: 0 })
+ * ```
  */
 export function defineModel<T>(
   options: { required: true } & PropOptions<T> & DefineModelOptions