fix(checkbox): change provided props to reactive

packages/checkbox/doc/basic.vue

@@ -7,6 +7,7 @@
     <el-checkbox v-model="checked2" border />
     <el-checkbox v-model="checked4" true-label="a" :false-label="3" />
     {{ checked4 }}
+    <el-checkbox-button v-model="checkbox" label="a" />
     <el-checkbox-group v-model="checkList">
       <el-checkbox label="A" />
       <el-checkbox label="B" />
@@ -27,6 +28,7 @@ export default defineComponent({
       checked2: true,
       checkList: ['Ha','A'],
       checked4: 3,
+      checkbox: false,
     }
   },
   methods: {

packages/checkbox/doc/group.vue

@@ -39,7 +39,7 @@
       </el-checkbox-group>
     </div>
     <div style="margin-top: 20px">
-      <el-checkbox-group v-model="checkboxGroup4" size="mini" disabled>
+      <el-checkbox-group v-model="checkboxGroup4" :size="size" disabled>
         <el-checkbox-button v-for="city in cities" :key="city" :label="city">{{ city }}</el-checkbox-button>
       </el-checkbox-group>
     </div>
@@ -60,8 +60,13 @@ export default defineComponent({
       checkboxGroup2: ['NYC'],
       checkboxGroup3: ['NYC'],
       checkboxGroup4: ['NYC'],
+
+      size: 'mini',
     }
   },
+  mounted() {
+    setTimeout(() => this.size = 'medium', 3000)
+  },
   methods: {
     handleCheckAllChange(val) {
       this.checkedCities = val ? cityOptions : []

packages/checkbox/src/checkbox-button.vue

@@ -54,6 +54,7 @@ import {
   computed,
   PropType,
 } from 'vue'
+import { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'
 import { useCheckbox, useCheckboxGroup } from './useCheckbox'
 
 export default defineComponent({
@@ -82,17 +83,17 @@ export default defineComponent({
       default: undefined,
     },
   },
-  emits: ['update:modelValue', 'change'],
+  emits: [UPDATE_MODEL_EVENT, 'change'],
   setup(props) {
     const { focus, isChecked, isDisabled, size, model, handleChange } = useCheckbox(props)
     const { checkboxGroup } = useCheckboxGroup()
 
     const activeStyle = computed(() => {
       return {
-        backgroundColor: checkboxGroup.fill || '',
-        borderColor: checkboxGroup.fill || '',
-        color: checkboxGroup.textColor || '',
-        boxShadow: '-1px 0 0 0 ' + checkboxGroup.fill,
+        backgroundColor: checkboxGroup.fill?.value || '',
+        borderColor: checkboxGroup.fill?.value || '',
+        color: checkboxGroup.textColor?.value || '',
+        boxShadow: '-1px 0 0 0 ' + checkboxGroup.fill?.value,
       }
     })
 

packages/checkbox/src/checkbox-group.vue

@@ -5,7 +5,8 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed, watch, provide, nextTick } from 'vue'
+import { defineComponent, computed, watch, provide, nextTick, toRefs } from 'vue'
+import { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'
 import { useCheckboxGroup } from './useCheckbox'
 
 export default defineComponent({
@@ -39,14 +40,14 @@ export default defineComponent({
     },
   },
 
-  emits: ['update:modelValue', 'change'],
+  emits: [UPDATE_MODEL_EVENT, 'change'],
 
   setup(props, ctx) {
     const { elFormItem, elFormItemSize, ELEMENT } = useCheckboxGroup()
     const checkboxGroupSize = computed(() => props.size || elFormItemSize.value || (ELEMENT || {}).size)
 
     const changeEvent = value => {
-      ctx.emit('update:modelValue', value)
+      ctx.emit(UPDATE_MODEL_EVENT, value)
       nextTick(() => {
         ctx.emit('change', value)
       })
@@ -64,13 +65,8 @@ export default defineComponent({
     provide('CheckboxGroup', {
       name: 'ElCheckboxGroup',
       modelValue,
-      disabled: props.disabled,
-      min: props.min,
-      max: props.max,
-      size: props.size,
-      fill: props.fill,
-      textColor: props.textColor,
-      checkboxGroupSize: checkboxGroupSize.value,
+      ...toRefs(props),
+      checkboxGroupSize,
       changeEvent,
     })
 

packages/checkbox/src/checkbox.d.ts

@@ -2,12 +2,12 @@ import { ComputedRef } from 'vue'
 export interface ICheckboxGroupInstance {
   name?: string
   modelValue?: ComputedRef
-  disabled?: boolean
-  min?: string | number
-  max?: string | number
-  size?: string
-  fill?: string
-  textColor?: string
+  disabled?: ComputedRef<boolean>
+  min?: ComputedRef<string | number>
+  max?: ComputedRef<string | number>
+  size?: ComputedRef<string>
+  fill?: ComputedRef<string>
+  textColor?: ComputedRef<string>
   checkboxGroupSize?: ComputedRef<string>
   changeEvent?: (val: any) => void
 }

packages/checkbox/src/checkbox.vue

@@ -62,6 +62,7 @@ import {
   defineComponent,
   PropType,
 } from 'vue'
+import { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'
 import { useCheckbox, setAria } from './useCheckbox'
 
 export default defineComponent({
@@ -103,7 +104,7 @@ export default defineComponent({
       default: undefined,
     },
   },
-  emits: ['update:modelValue', 'change'],
+  emits: [UPDATE_MODEL_EVENT, 'change'],
   setup(props) {
     const { focus, isChecked, isDisabled, checkboxSize, model, handleChange } = useCheckbox(props)
 

packages/checkbox/src/useCheckbox.ts

@@ -35,7 +35,7 @@ const useModel = (props: ICheckboxProps) => {
   const { emit } = getCurrentInstance()
   const { isGroup, checkboxGroup } = useCheckboxGroup()
   const isLimitExceeded = ref(false)
-  const store = computed(() => checkboxGroup ? checkboxGroup.modelValue.value : props.modelValue)
+  const store = computed(() => checkboxGroup ? checkboxGroup.modelValue?.value : props.modelValue)
   const model = computed({
     get() {
       return isGroup.value ? store.value : props.modelValue !== undefined ? props.modelValue : selfModel
@@ -45,10 +45,10 @@ const useModel = (props: ICheckboxProps) => {
       if (isGroup.value && Array.isArray(val)) {
         isLimitExceeded.value = false
 
-        if (checkboxGroup.min !== undefined && val.length < checkboxGroup.min) {
+        if (checkboxGroup.min !== undefined && val.length < checkboxGroup.min.value) {
           isLimitExceeded.value = true
         }
-        if (checkboxGroup.max !== undefined && val.length > checkboxGroup.max) {
+        if (checkboxGroup.max !== undefined && val.length > checkboxGroup.max.value) {
           isLimitExceeded.value = true
         }
 
@@ -69,7 +69,7 @@ const useModel = (props: ICheckboxProps) => {
 const useCheckboxStatus = (props: ICheckboxProps, { model }: IArgs<typeof useModel>) => {
   const { isGroup, checkboxGroup, elFormItemSize, ELEMENT } = useCheckboxGroup()
   const focus = ref(false)
-  const size = computed<string|undefined>(() => checkboxGroup.checkboxGroupSize || elFormItemSize || (ELEMENT || {}).size)
+  const size = computed<string|undefined>(() => checkboxGroup.checkboxGroupSize?.value || elFormItemSize || (ELEMENT || {}).size)
   const isChecked = computed(() => {
     const value = model.value
     if (toTypeString(value) === '[object Boolean]') {
@@ -83,7 +83,7 @@ const useCheckboxStatus = (props: ICheckboxProps, { model }: IArgs<typeof useMod
   const checkboxSize = computed(() => {
     const temCheckboxSize = props.size || elFormItemSize.value || (ELEMENT || {} as any).size
     return isGroup.value
-      ? checkboxGroup.checkboxGroupSize || temCheckboxSize
+      ? checkboxGroup.checkboxGroupSize?.value || temCheckboxSize
       : temCheckboxSize
   })
 
@@ -101,15 +101,15 @@ const useDisabled = (
 ) => {
   const { elForm, isGroup, checkboxGroup } = useCheckboxGroup()
   const isLimitDisabled = computed(() => {
-    const max = checkboxGroup.max
-    const min = checkboxGroup.min
+    const max = checkboxGroup.max?.value
+    const min = checkboxGroup.min?.value
     return !!(max || min) && (model.value.length >= max && !isChecked.value) ||
       (model.value.length <= min && isChecked.value)
   })
   const isDisabled = computed(() => {
     return isGroup.value
-      ? checkboxGroup.disabled || props.disabled ||  (elForm as any || {} as any).disabled || isLimitDisabled.value
-      : props.disabled || (elForm as any || {} as any).disabled
+      ? checkboxGroup.disabled?.value || props.disabled ||  (elForm as any || {} as any).disabled?.value || isLimitDisabled.value
+      : props.disabled || (elForm as any || {} as any).disabled?.value
   })
 
   return {
@@ -162,7 +162,6 @@ export const setAria = (props: ICheckboxProps) => {
 }
 
 export const useCheckbox = (props: ICheckboxProps) => {
-  const instance = getCurrentInstance()
   const { model, isLimitExceeded } = useModel(props)
   const { focus, size, isChecked, checkboxSize } = useCheckboxStatus(props, { model })
   const { isDisabled } = useDisabled(props, { model, isChecked })
@@ -171,7 +170,6 @@ export const useCheckbox = (props: ICheckboxProps) => {
   setStoreValue(props, { model })
 
   return {
-    instance,
     isChecked,
     isDisabled,
     checkboxSize,