diff --git a/examples/docs/en-US/checkbox.md b/examples/docs/en-US/checkbox.md
index 35f9eddc3..dc67aee7d 100644
--- a/examples/docs/en-US/checkbox.md
+++ b/examples/docs/en-US/checkbox.md
@@ -128,7 +128,7 @@ The `min` and `max` properties can help you to limit the number of checked items
 ```html
 <template>
   <el-checkbox-group 
-    v-model="checkedCities1"
+    v-model="checkedCities"
     :min="1"
     :max="2">
     <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
@@ -139,7 +139,7 @@ The `min` and `max` properties can help you to limit the number of checked items
   export default {
     data() {
       return {
-        checkedCities1: ['Shanghai', 'Beijing'],
+        checkedCities: ['Shanghai', 'Beijing'],
         cities: cityOptions
       };
     }
@@ -200,21 +200,21 @@ Checkbox with button styles.
 ```html
 <template>
   <div>
-    <el-checkbox v-model="checked3" label="Option1" border></el-checkbox>
-    <el-checkbox v-model="checked4" label="Option2" border></el-checkbox>
+    <el-checkbox v-model="checked1" label="Option1" border></el-checkbox>
+    <el-checkbox v-model="checked2" label="Option2" border></el-checkbox>
   </div>
   <div style="margin-top: 20px">
-    <el-checkbox v-model="checked5" label="Option1" border size="medium"></el-checkbox>
-    <el-checkbox v-model="checked6" label="Option2" border size="medium"></el-checkbox>
+    <el-checkbox v-model="checked3" label="Option1" border size="medium"></el-checkbox>
+    <el-checkbox v-model="checked4" label="Option2" border size="medium"></el-checkbox>
   </div>
   <div style="margin-top: 20px">
-    <el-checkbox-group v-model="checkboxGroup5" size="small">
+    <el-checkbox-group v-model="checkboxGroup1" size="small">
       <el-checkbox label="Option1" border></el-checkbox>
       <el-checkbox label="Option2" border disabled></el-checkbox>
     </el-checkbox-group>
   </div>
   <div style="margin-top: 20px">
-    <el-checkbox-group v-model="checkboxGroup6" size="mini" disabled>
+    <el-checkbox-group v-model="checkboxGroup2" size="mini" disabled>
       <el-checkbox label="Option1" border></el-checkbox>
       <el-checkbox label="Option2" border></el-checkbox>
     </el-checkbox-group>
@@ -225,12 +225,12 @@ Checkbox with button styles.
   export default {
     data () {
       return {
-        checked3: true,
-        checked4: false,
-        checked5: false,
-        checked6: true,
-        checkboxGroup5: [],
-        checkboxGroup6: []
+        checked1: true,
+        checked2: false,
+        checked3: false,
+        checked4: true,
+        checkboxGroup1: [],
+        checkboxGroup2: []
       };
     }
   }
diff --git a/examples/docs/en-US/color-picker.md b/examples/docs/en-US/color-picker.md
index 6ebf3e3ec..8fa0b6dfc 100644
--- a/examples/docs/en-US/color-picker.md
+++ b/examples/docs/en-US/color-picker.md
@@ -32,13 +32,13 @@ ColorPicker is a color selector supporting multiple color formats.
 
 :::demo ColorPicker supports alpha channel selecting. To activate alpha selecting, just add the `show-alpha` attribute.
 ```html
-<el-color-picker v-model="color3" show-alpha></el-color-picker>
+<el-color-picker v-model="color" show-alpha></el-color-picker>
 
 <script>
   export default {
     data() {
       return {
-        color3: 'rgba(19, 206, 102, 0.8)'
+        color: 'rgba(19, 206, 102, 0.8)'
       }
     }
   };
@@ -51,7 +51,7 @@ ColorPicker is a color selector supporting multiple color formats.
 :::demo ColorPicker supports predefined color options
 ```html
 <el-color-picker
-  v-model="color5"
+  v-model="color"
   show-alpha
   :predefine="predefineColors">
 </el-color-picker>
@@ -60,7 +60,7 @@ ColorPicker is a color selector supporting multiple color formats.
   export default {
     data() {
       return {
-        color5: 'rgba(255, 69, 0, 0.68)',
+        color: 'rgba(255, 69, 0, 0.68)',
         predefineColors: [
           '#ff4500',
           '#ff8c00',
@@ -89,16 +89,16 @@ ColorPicker is a color selector supporting multiple color formats.
 
 :::demo
 ```html
-<el-color-picker v-model="color4"></el-color-picker>
-<el-color-picker v-model="color4" size="medium"></el-color-picker>
-<el-color-picker v-model="color4" size="small"></el-color-picker>
-<el-color-picker v-model="color4" size="mini"></el-color-picker>
+<el-color-picker v-model="color"></el-color-picker>
+<el-color-picker v-model="color" size="medium"></el-color-picker>
+<el-color-picker v-model="color" size="small"></el-color-picker>
+<el-color-picker v-model="color" size="mini"></el-color-picker>
 
 <script>
   export default {
     data() {
       return {
-        color4: '#409EFF'
+        color: '#409EFF'
       }
     }
   };
diff --git a/examples/docs/en-US/date-picker.md b/examples/docs/en-US/date-picker.md
index 21d0bcf7b..2d6ddeb13 100644
--- a/examples/docs/en-US/date-picker.md
+++ b/examples/docs/en-US/date-picker.md
@@ -25,7 +25,7 @@ Basic date picker measured by 'day'.
       v-model="value2"
       type="date"
       placeholder="Pick a day"
-      :picker-options="pickerOptions1">
+      :picker-options="pickerOptions">
     </el-date-picker>
   </div>
 </template>
@@ -34,7 +34,7 @@ Basic date picker measured by 'day'.
   export default {
     data() {
       return {
-        pickerOptions1: {
+        pickerOptions: {
           disabledDate(time) {
             return time.getTime() > Date.now();
           },
@@ -79,7 +79,7 @@ You can choose week, month, year or multiple dates by extending the standard dat
   <div class="block">
     <span class="demonstration">Week</span>
     <el-date-picker
-      v-model="value3"
+      v-model="value1"
       type="week"
       format="Week WW"
       placeholder="Pick a week">
@@ -88,7 +88,7 @@ You can choose week, month, year or multiple dates by extending the standard dat
   <div class="block">
     <span class="demonstration">Month</span>
     <el-date-picker
-      v-model="value4"
+      v-model="value2"
       type="month"
       placeholder="Pick a month">
     </el-date-picker>
@@ -98,7 +98,7 @@ You can choose week, month, year or multiple dates by extending the standard dat
   <div class="block">
     <span class="demonstration">Year</span>
     <el-date-picker
-      v-model="value5"
+      v-model="value3"
       type="year"
       placeholder="Pick a year">
     </el-date-picker>
@@ -107,7 +107,7 @@ You can choose week, month, year or multiple dates by extending the standard dat
     <span class="demonstration">Dates</span>
     <el-date-picker
       type="dates"
-      v-model="value14"
+      v-model="value4"
       placeholder="Pick one or more dates">
     </el-date-picker>
   </div>
@@ -117,10 +117,10 @@ You can choose week, month, year or multiple dates by extending the standard dat
   export default {
     data() {
       return {
+        value1: '',
+        value2: '',
         value3: '',
-        value4: '',
-        value5: '',
-        value14: ''
+        value4: ''
       };
     }
   };
@@ -140,7 +140,7 @@ Picking a date range is supported.
   <div class="block">
     <span class="demonstration">Default</span>
     <el-date-picker
-      v-model="value6"
+      v-model="value1"
       type="daterange"
       range-separator="To"
       start-placeholder="Start date"
@@ -150,14 +150,14 @@ Picking a date range is supported.
   <div class="block">
     <span class="demonstration">With quick options</span>
     <el-date-picker
-      v-model="value7"
+      v-model="value2"
       type="daterange"
       align="right"
       unlink-panels
       range-separator="To"
       start-placeholder="Start date"
       end-placeholder="End date"
-      :picker-options="pickerOptions2">
+      :picker-options="pickerOptions">
     </el-date-picker>
   </div>
 </template>
@@ -166,7 +166,7 @@ Picking a date range is supported.
   export default {
     data() {
       return {
-        pickerOptions2: {
+        pickerOptions: {
           shortcuts: [{
             text: 'Last week',
             onClick(picker) {
@@ -193,8 +193,8 @@ Picking a date range is supported.
             }
           }]
         },
-        value6: '',
-        value7: ''
+        value1: '',
+        value2: ''
       };
     }
   };
@@ -213,7 +213,7 @@ Picking a month range is supported.
   <div class="block">
     <span class="demonstration">Default</span>
     <el-date-picker
-      v-model="value15"
+      v-model="value1"
       type="monthrange"
       range-separator="To"
       start-placeholder="Start month"
@@ -223,14 +223,14 @@ Picking a month range is supported.
   <div class="block">
     <span class="demonstration">With quick options</span>
     <el-date-picker
-      v-model="value16"
+      v-model="value2"
       type="monthrange"
       align="right"
       unlink-panels
       range-separator="To"
       start-placeholder="Start month"
       end-placeholder="End month"
-      :picker-options="pickerOptions3">
+      :picker-options="pickerOptions">
     </el-date-picker>
   </div>
 </template>
@@ -239,7 +239,7 @@ Picking a month range is supported.
   export default {
     data() {
       return {
-        pickerOptions3: {
+        pickerOptions: {
           shortcuts: [{
             text: 'This month',
             onClick(picker) {
@@ -262,8 +262,8 @@ Picking a month range is supported.
             }
           }]
         },
-        value15: '',
-        value16: ''
+        value1: '',
+        value2: ''
       };
     }
   };
@@ -283,7 +283,7 @@ If type is `daterange`, `default-value` sets the left side calendar.
   <div class="block">
     <span class="demonstration">date</span>
     <el-date-picker
-      v-model="value8"
+      v-model="value1"
       type="date"
       placeholder="Pick a date"
       default-value="2010-10-01">
@@ -292,7 +292,7 @@ If type is `daterange`, `default-value` sets the left side calendar.
   <div class="block">
     <span class="demonstration">daterange</span>
     <el-date-picker
-      v-model="value9"
+      v-model="value2"
       type="daterange"
       align="right"
       start-placeholder="Start Date"
@@ -306,8 +306,8 @@ If type is `daterange`, `default-value` sets the left side calendar.
   export default {
     data() {
       return {
-        value8: '',
-        value9: ''
+        value1: '',
+        value2: ''
       };
     }
   };
@@ -352,9 +352,9 @@ Pay attention to capitalization
 <template>
   <div class="block">
     <span class="demonstration">Emits Date object</span>
-    <div class="demonstration">Value: {{ value10 }}</div>
+    <div class="demonstration">Value: {{ value1 }}</div>
     <el-date-picker
-      v-model="value10"
+      v-model="value1"
       type="date"
       placeholder="Pick a Date"
       format="yyyy/MM/dd">
@@ -362,9 +362,9 @@ Pay attention to capitalization
   </div>
   <div class="block">
     <span class="demonstration">Use value-format</span>
-    <div class="demonstration">Value: {{ value11 }}</div>
+    <div class="demonstration">Value: {{ value2 }}</div>
     <el-date-picker
-      v-model="value11"
+      v-model="value2"
       type="date"
       placeholder="Pick a Date"
       format="yyyy/MM/dd"
@@ -373,9 +373,9 @@ Pay attention to capitalization
   </div>
   <div class="block">
     <span class="demonstration">Timestamp</span>
-    <div class="demonstration">Value：{{ value12 }}</div>
+    <div class="demonstration">Value：{{ value3 }}</div>
     <el-date-picker
-      v-model="value12"
+      v-model="value3"
       type="date"
       placeholder="Pick a Date"
       format="yyyy/MM/dd"
@@ -388,9 +388,9 @@ Pay attention to capitalization
   export default {
     data() {
       return {
-        value10: '',
-        value11: '',
-        value12: ''
+        value1: '',
+        value2: '',
+        value3: ''
       };
     }
   };
@@ -406,9 +406,9 @@ When picking a date range, you can assign the time part for start date and end d
 ```html
 <template>
   <div class="block">
-    <p>Component value：{{ value13 }}</p>
+    <p>Component value：{{ value }}</p>
     <el-date-picker
-      v-model="value13"
+      v-model="value"
       type="daterange"
       start-placeholder="Start date"
       end-placeholder="End date"
@@ -421,7 +421,7 @@ When picking a date range, you can assign the time part for start date and end d
   export default {
     data() {
       return {
-        value13: ''
+        value: ''
       };
     }
   };
diff --git a/examples/docs/en-US/input-number.md b/examples/docs/en-US/input-number.md
index cf182edda..ad59523a6 100644
--- a/examples/docs/en-US/input-number.md
+++ b/examples/docs/en-US/input-number.md
@@ -8,13 +8,13 @@ Input numerical values with a customizable range.
 
 ```html
 <template>
-  <el-input-number v-model="num1" @change="handleChange" :min="1" :max="10"></el-input-number>
+  <el-input-number v-model="num" @change="handleChange" :min="1" :max="10"></el-input-number>
 </template>
 <script>
   export default {
     data() {
       return {
-        num1: 1
+        num: 1
       };
     },
     methods: {
@@ -33,13 +33,13 @@ Input numerical values with a customizable range.
 
 ```html
 <template>
-  <el-input-number v-model="num2" :disabled="true"></el-input-number>
+  <el-input-number v-model="num" :disabled="true"></el-input-number>
 </template>
 <script>
   export default {
     data() {
       return {
-        num2: 1
+        num: 1
       }
     }
   };
@@ -55,13 +55,13 @@ Allows you to define incremental steps.
 
 ```html
 <template>
-  <el-input-number v-model="num3" :step="2"></el-input-number>
+  <el-input-number v-model="num" :step="2"></el-input-number>
 </template>
 <script>
   export default {
     data() {
       return {
-        num3: 5
+        num: 5
       }
     }
   };
@@ -75,13 +75,13 @@ Allows you to define incremental steps.
 
 ```html
 <template>
-  <el-input-number v-model="num9" :precision="2" :step="0.1" :max="10"></el-input-number>
+  <el-input-number v-model="num" :precision="2" :step="0.1" :max="10"></el-input-number>
 </template>
 <script>
   export default {
     data() {
       return {
-        num9: 1
+        num: 1
       }
     }
   };
@@ -102,19 +102,19 @@ Use attribute `size` to set additional sizes with `medium`, `small` or `mini`.
 
 ```html
 <template>
-  <el-input-number v-model="num4"></el-input-number>
-    <el-input-number size="medium" v-model="num5"></el-input-number>
-    <el-input-number size="small" v-model="num6"></el-input-number>
-    <el-input-number size="mini" v-model="num7"></el-input-number>
+  <el-input-number v-model="num1"></el-input-number>
+    <el-input-number size="medium" v-model="num2"></el-input-number>
+    <el-input-number size="small" v-model="num3"></el-input-number>
+    <el-input-number size="mini" v-model="num4"></el-input-number>
 </template>
 <script>
   export default {
     data() {
       return {
-        num4: 1,
-        num5: 1,
-        num6: 1,
-        num7: 1
+        num1: 1,
+        num2: 1,
+        num3: 1,
+        num4: 1
       }
     }
   };
@@ -127,13 +127,13 @@ Use attribute `size` to set additional sizes with `medium`, `small` or `mini`.
 :::demo Set `controls-position` to decide the position of control buttons.
 ```html
 <template>
-  <el-input-number v-model="num8" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>
+  <el-input-number v-model="num" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>
 </template>
 <script>
   export default {
     data() {
       return {
-        num8: 1
+        num: 1
       };
     },
     methods: {
diff --git a/examples/docs/es/checkbox.md b/examples/docs/es/checkbox.md
index 20df278a7..0fc180b5b 100644
--- a/examples/docs/es/checkbox.md
+++ b/examples/docs/es/checkbox.md
@@ -128,7 +128,7 @@ Las propiedades `min` y `max` pueden limitar la cantidad de elementos selecciona
 ```html
 <template>
   <el-checkbox-group 
-    v-model="checkedCities1"
+    v-model="checkedCities"
     :min="1"
     :max="2">
     <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
@@ -139,7 +139,7 @@ Las propiedades `min` y `max` pueden limitar la cantidad de elementos selecciona
   export default {
     data() {
       return {
-        checkedCities1: ['Shanghai', 'Beijing'],
+        checkedCities: ['Shanghai', 'Beijing'],
         cities: cityOptions
       };
     }
@@ -200,21 +200,21 @@ Checkbox con estilo tipo Botón.
 ```html
 <template>
   <div>
-    <el-checkbox v-model="checked3" label="Opción1" border></el-checkbox>
-    <el-checkbox v-model="checked4" label="Opción2" border></el-checkbox>
+    <el-checkbox v-model="checked1" label="Opción1" border></el-checkbox>
+    <el-checkbox v-model="checked2" label="Opción2" border></el-checkbox>
   </div>
   <div style="margin-top: 20px">
-    <el-checkbox v-model="checked5" label="Opción1" border size="medium"></el-checkbox>
-    <el-checkbox v-model="checked6" label="Opción2" border size="medium"></el-checkbox>
+    <el-checkbox v-model="checked3" label="Opción1" border size="medium"></el-checkbox>
+    <el-checkbox v-model="checked4" label="Opción2" border size="medium"></el-checkbox>
   </div>
   <div style="margin-top: 20px">
-    <el-checkbox-group v-model="checkboxGroup5" size="small">
+    <el-checkbox-group v-model="checkboxGroup1" size="small">
       <el-checkbox label="Opción1" border></el-checkbox>
       <el-checkbox label="Opción2" border disabled></el-checkbox>
     </el-checkbox-group>
   </div>
   <div style="margin-top: 20px">
-    <el-checkbox-group v-model="checkboxGroup6" size="mini" disabled>
+    <el-checkbox-group v-model="checkboxGroup2" size="mini" disabled>
       <el-checkbox label="Opción1" border></el-checkbox>
       <el-checkbox label="Opción2" border></el-checkbox>
     </el-checkbox-group>
@@ -225,12 +225,12 @@ Checkbox con estilo tipo Botón.
   export default {
     data () {
       return {
-        checked3: true,
-        checked4: false,
-        checked5: false,
-        checked6: true,
-        checkboxGroup5: [],
-        checkboxGroup6: []
+        checked1: true,
+        checked2: false,
+        checked3: false,
+        checked4: true,
+        checkboxGroup1: [],
+        checkboxGroup2: []
       };
     }
   }
diff --git a/examples/docs/es/color-picker.md b/examples/docs/es/color-picker.md
index ed3e21e44..98591276f 100644
--- a/examples/docs/es/color-picker.md
+++ b/examples/docs/es/color-picker.md
@@ -32,13 +32,13 @@ ColorPicker es un selector de color que soporta varios formatos de color.
 
 :::demo ColorPicker soporta selección de canales alpha. Para activarlo sólo agrege el atributo `show-alpha`.
 ```html
-<el-color-picker v-model="color3" show-alpha></el-color-picker>
+<el-color-picker v-model="color" show-alpha></el-color-picker>
 
 <script>
   export default {
     data() {
       return {
-        color3: 'rgba(19, 206, 102, 0.8)'
+        color: 'rgba(19, 206, 102, 0.8)'
       }
     }
   };
@@ -51,7 +51,7 @@ ColorPicker es un selector de color que soporta varios formatos de color.
 :::demo ColorPicker supports predefined color options
 ```html
 <el-color-picker
-  v-model="color5"
+  v-model="color"
   show-alpha
   :predefine="predefineColors">
 </el-color-picker>
@@ -60,7 +60,7 @@ ColorPicker es un selector de color que soporta varios formatos de color.
   export default {
     data() {
       return {
-        color5: 'rgba(255, 69, 0, 0.68)',
+        color: 'rgba(255, 69, 0, 0.68)',
         predefineColors: [
           '#ff4500',
           '#ff8c00',
@@ -88,16 +88,16 @@ ColorPicker es un selector de color que soporta varios formatos de color.
 
 :::demo
 ```html
-<el-color-picker v-model="color4"></el-color-picker>
-<el-color-picker v-model="color4" size="medium"></el-color-picker>
-<el-color-picker v-model="color4" size="small"></el-color-picker>
-<el-color-picker v-model="color4" size="mini"></el-color-picker>
+<el-color-picker v-model="color"></el-color-picker>
+<el-color-picker v-model="color" size="medium"></el-color-picker>
+<el-color-picker v-model="color" size="small"></el-color-picker>
+<el-color-picker v-model="color" size="mini"></el-color-picker>
 
 <script>
   export default {
     data() {
       return {
-        color4: '#409EFF'
+        color: '#409EFF'
       }
     }
   };
diff --git a/examples/docs/es/date-picker.md b/examples/docs/es/date-picker.md
index b65f0d53d..5ad473c37 100644
--- a/examples/docs/es/date-picker.md
+++ b/examples/docs/es/date-picker.md
@@ -26,7 +26,7 @@ Date Picker básico por "día".
       v-model="value2"
       type="date"
       placeholder="Pick a day"
-      :picker-options="pickerOptions1">
+      :picker-options="pickerOptions">
     </el-date-picker>
   </div>
 </template>
@@ -35,7 +35,7 @@ Date Picker básico por "día".
   export default {
     data() {
       return {
-        pickerOptions1: {
+        pickerOptions: {
           disabledDate(time) {
             return time.getTime() > Date.now();
           },
@@ -81,7 +81,7 @@ Puede elegir la semana, el mes, el año o varias fechas ampliando el componente
   <div class="block">
     <span class="demonstration">Week</span>
     <el-date-picker
-      v-model="value3"
+      v-model="value1"
       type="week"
       format="Week WW"
       placeholder="Pick a week">
@@ -90,7 +90,7 @@ Puede elegir la semana, el mes, el año o varias fechas ampliando el componente
   <div class="block">
     <span class="demonstration">Month</span>
     <el-date-picker
-      v-model="value4"
+      v-model="value2"
       type="month"
       placeholder="Pick a month">
     </el-date-picker>
@@ -100,7 +100,7 @@ Puede elegir la semana, el mes, el año o varias fechas ampliando el componente
   <div class="block">
     <span class="demonstration">Year</span>
     <el-date-picker
-      v-model="value5"
+      v-model="value3"
       type="year"
       placeholder="Pick a year">
     </el-date-picker>
@@ -109,7 +109,7 @@ Puede elegir la semana, el mes, el año o varias fechas ampliando el componente
     <span class="demonstration">Dates</span>
     <el-date-picker
       type="dates"
-      v-model="value14"
+      v-model="value4"
       placeholder="Pick one or more dates">
     </el-date-picker>
   </div>
@@ -119,10 +119,10 @@ Puede elegir la semana, el mes, el año o varias fechas ampliando el componente
   export default {
     data() {
       return {
+        value1: '',
+        value2: '',
         value3: '',
-        value4: '',
-        value5: '',
-        value14: ''
+        value4: ''
       };
     }
   };
@@ -142,7 +142,7 @@ Se soporta la selección de un rango de fechas.
   <div class="block">
     <span class="demonstration">Default</span>
     <el-date-picker
-      v-model="value6"
+      v-model="value1"
       type="daterange"
       range-separator="To"
       start-placeholder="Start date"
@@ -152,14 +152,14 @@ Se soporta la selección de un rango de fechas.
   <div class="block">
     <span class="demonstration">With quick options</span>
     <el-date-picker
-      v-model="value7"
+      v-model="value2"
       type="daterange"
       align="right"
       unlink-panels
       range-separator="To"
       start-placeholder="Start date"
       end-placeholder="End date"
-      :picker-options="pickerOptions2">
+      :picker-options="pickerOptions">
     </el-date-picker>
   </div>
 </template>
@@ -168,7 +168,7 @@ Se soporta la selección de un rango de fechas.
   export default {
     data() {
       return {
-        pickerOptions2: {
+        pickerOptions: {
           shortcuts: [{
             text: 'Last week',
             onClick(picker) {
@@ -195,8 +195,8 @@ Se soporta la selección de un rango de fechas.
             }
           }]
         },
-        value6: '',
-        value7: ''
+        value1: '',
+        value2: ''
       };
     }
   };
@@ -215,7 +215,7 @@ Se admite la selección de un intervalo de un mes.
   <div class="block">
     <span class="demonstration">Default</span>
     <el-date-picker
-      v-model="value15"
+      v-model="value1"
       type="monthrange"
       range-separator="To"
       start-placeholder="Start month"
@@ -225,14 +225,14 @@ Se admite la selección de un intervalo de un mes.
   <div class="block">
     <span class="demonstration">With quick options</span>
     <el-date-picker
-      v-model="value16"
+      v-model="value2"
       type="monthrange"
       align="right"
       unlink-panels
       range-separator="To"
       start-placeholder="Start month"
       end-placeholder="End month"
-      :picker-options="pickerOptions3">
+      :picker-options="pickerOptions">
     </el-date-picker>
   </div>
 </template>
@@ -241,7 +241,7 @@ Se admite la selección de un intervalo de un mes.
   export default {
     data() {
       return {
-        pickerOptions3: {
+        pickerOptions: {
           shortcuts: [{
             text: 'This month',
             onClick(picker) {
@@ -264,8 +264,8 @@ Se admite la selección de un intervalo de un mes.
             }
           }]
         },
-        value15: '',
-        value16: ''
+        value1: '',
+        value2: ''
       };
     }
   };
@@ -285,7 +285,7 @@ Si el tipo es `daterange`, `default-value` establece el calendario del lado izqu
   <div class="block">
     <span class="demonstration">date</span>
     <el-date-picker
-      v-model="value8"
+      v-model="value1"
       type="date"
       placeholder="Pick a date"
       default-value="2010-10-01">
@@ -294,7 +294,7 @@ Si el tipo es `daterange`, `default-value` establece el calendario del lado izqu
   <div class="block">
     <span class="demonstration">daterange</span>
     <el-date-picker
-      v-model="value9"
+      v-model="value2"
       type="daterange"
       align="right"
       start-placeholder="Start Date"
@@ -308,8 +308,8 @@ Si el tipo es `daterange`, `default-value` establece el calendario del lado izqu
   export default {
     data() {
       return {
-        value8: '',
-        value9: ''
+        value1: '',
+        value2: ''
       };
     }
   };
@@ -352,9 +352,9 @@ Preste atención a la capitalización
 <template>
   <div class="block">
     <span class="demonstration">Emits Date object</span>
-    <div class="demonstration">Value: {{ value10 }}</div>
+    <div class="demonstration">Value: {{ value1 }}</div>
     <el-date-picker
-      v-model="value10"
+      v-model="value1"
       type="date"
       placeholder="Pick a Date"
       format="yyyy/MM/dd">
@@ -362,9 +362,9 @@ Preste atención a la capitalización
   </div>
   <div class="block">
     <span class="demonstration">Use value-format</span>
-    <div class="demonstration">Value: {{ value11 }}</div>
+    <div class="demonstration">Value: {{ value2 }}</div>
     <el-date-picker
-      v-model="value11"
+      v-model="value2"
       type="date"
       placeholder="Pick a Date"
       format="yyyy/MM/dd"
@@ -373,9 +373,9 @@ Preste atención a la capitalización
   </div>
   <div class="block">
     <span class="demonstration">Timestamp</span>
-    <div class="demonstration">Value：{{ value12 }}</div>
+    <div class="demonstration">Value：{{ value3 }}</div>
     <el-date-picker
-      v-model="value12"
+      v-model="value3"
       type="date"
       placeholder="Pick a Date"
       format="yyyy/MM/dd"
@@ -388,9 +388,9 @@ Preste atención a la capitalización
   export default {
     data() {
       return {
-        value10: '',
-        value11: '',
-        value12: ''
+        value1: '',
+        value2: '',
+        value3: ''
       };
     }
   };
@@ -407,9 +407,9 @@ Al seleccionar un intervalo de fechas, puede asignar la hora para la fecha de in
 ```html
 <template>
   <div class="block">
-    <p>Component value：{{ value12 }}</p>
+    <p>Component value：{{ value }}</p>
     <el-date-picker
-      v-model="value12"
+      v-model="value"
       type="daterange"
       start-placeholder="Start date"
       end-placeholder="End date"
@@ -422,7 +422,7 @@ Al seleccionar un intervalo de fechas, puede asignar la hora para la fecha de in
   export default {
     data() {
       return {
-        value12: ''
+        value: ''
       };
     }
   };
diff --git a/examples/docs/es/input-number.md b/examples/docs/es/input-number.md
index cf1f0e1b8..362f8db21 100644
--- a/examples/docs/es/input-number.md
+++ b/examples/docs/es/input-number.md
@@ -8,13 +8,13 @@ Input de  valores numéricos con un rango personalizable.
 
 ```html
 <template>
-  <el-input-number v-model="num1" @change="handleChange" :min="1" :max="10"></el-input-number>
+  <el-input-number v-model="num" @change="handleChange" :min="1" :max="10"></el-input-number>
 </template>
 <script>
   export default {
     data() {
       return {
-        num1: 1
+        num: 1
       };
     },
     methods: {
@@ -33,13 +33,13 @@ Input de  valores numéricos con un rango personalizable.
 
 ```html
 <template>
-  <el-input-number v-model="num2" :disabled="true"></el-input-number>
+  <el-input-number v-model="num" :disabled="true"></el-input-number>
 </template>
 <script>
   export default {
     data() {
       return {
-        num2: 1
+        num: 1
       }
     }
   };
@@ -55,13 +55,13 @@ Le permite definir el nivel de incremento de los saltos.
 
 ```html
 <template>
-  <el-input-number v-model="num3" :step="2"></el-input-number>
+  <el-input-number v-model="num" :step="2"></el-input-number>
 </template>
 <script>
   export default {
     data() {
       return {
-        num3: 5
+        num: 5
       }
     }
   };
@@ -75,13 +75,13 @@ Le permite definir el nivel de incremento de los saltos.
 
 ```html
 <template>
-  <el-input-number v-model="num9" :precision="2" :step="0.1" :max="10"></el-input-number>
+  <el-input-number v-model="num" :precision="2" :step="0.1" :max="10"></el-input-number>
 </template>
 <script>
   export default {
     data() {
       return {
-        num9: 1
+        num: 1
       }
     }
   };
@@ -102,19 +102,19 @@ Utilice el atributo `size` para establecer tamaños adicionales con `medium`, `s
 
 ```html
 <template>
-  <el-input-number v-model="num4"></el-input-number>
-    <el-input-number size="medium" v-model="num5"></el-input-number>
-    <el-input-number size="small" v-model="num6"></el-input-number>
-    <el-input-number size="mini" v-model="num7"></el-input-number>
+  <el-input-number v-model="num1"></el-input-number>
+    <el-input-number size="medium" v-model="num2"></el-input-number>
+    <el-input-number size="small" v-model="num3"></el-input-number>
+    <el-input-number size="mini" v-model="num4"></el-input-number>
 </template>
 <script>
   export default {
     data() {
       return {
-        num4: 1,
-        num5: 1,
-        num6: 1,
-        num7: 1
+        num1: 1,
+        num2: 1,
+        num3: 1,
+        num4: 1
       }
     }
   };
@@ -128,13 +128,13 @@ Utilice el atributo `size` para establecer tamaños adicionales con `medium`, `s
 
 ```html
 <template>
-  <el-input-number v-model="num8" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>
+  <el-input-number v-model="num" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>
 </template>
 <script>
   export default {
     data() {
       return {
-        num8: 1
+        num: 1
       };
     },
     methods: {
diff --git a/examples/docs/fr-FR/checkbox.md b/examples/docs/fr-FR/checkbox.md
index 73b1bdd9d..24e227f38 100644
--- a/examples/docs/fr-FR/checkbox.md
+++ b/examples/docs/fr-FR/checkbox.md
@@ -128,7 +128,7 @@ Les propriétés `min` et `max` permettent de limiter la quantité d'éléments
 ```html
 <template>
   <el-checkbox-group
-    v-model="checkedCities1"
+    v-model="checkedCities"
     :min="1"
     :max="2">
     <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
@@ -139,7 +139,7 @@ Les propriétés `min` et `max` permettent de limiter la quantité d'éléments
   export default {
     data() {
       return {
-        checkedCities1: ['Shanghai', 'Beijing'],
+        checkedCities: ['Shanghai', 'Beijing'],
         cities: cityOptions
       };
     }
@@ -200,21 +200,21 @@ Des checkbox avec une apparence de bouton.
 ```html
 <template>
   <div>
-    <el-checkbox v-model="checked3" label="Option1" border></el-checkbox>
-    <el-checkbox v-model="checked4" label="Option2" border></el-checkbox>
+    <el-checkbox v-model="checked1" label="Option1" border></el-checkbox>
+    <el-checkbox v-model="checked2" label="Option2" border></el-checkbox>
   </div>
   <div style="margin-top: 20px">
-    <el-checkbox v-model="checked5" label="Option1" border size="medium"></el-checkbox>
-    <el-checkbox v-model="checked6" label="Option2" border size="medium"></el-checkbox>
+    <el-checkbox v-model="checked3" label="Option1" border size="medium"></el-checkbox>
+    <el-checkbox v-model="checked4" label="Option2" border size="medium"></el-checkbox>
   </div>
   <div style="margin-top: 20px">
-    <el-checkbox-group v-model="checkboxGroup5" size="small">
+    <el-checkbox-group v-model="checkboxGroup1" size="small">
       <el-checkbox label="Option1" border></el-checkbox>
       <el-checkbox label="Option2" border disabled></el-checkbox>
     </el-checkbox-group>
   </div>
   <div style="margin-top: 20px">
-    <el-checkbox-group v-model="checkboxGroup6" size="mini" disabled>
+    <el-checkbox-group v-model="checkboxGroup2" size="mini" disabled>
       <el-checkbox label="Option1" border></el-checkbox>
       <el-checkbox label="Option2" border></el-checkbox>
     </el-checkbox-group>
@@ -225,12 +225,12 @@ Des checkbox avec une apparence de bouton.
   export default {
     data () {
       return {
-        checked3: true,
-        checked4: false,
-        checked5: false,
-        checked6: true,
-        checkboxGroup5: [],
-        checkboxGroup6: []
+        checked1: true,
+        checked2: false,
+        checked3: false,
+        checked4: true,
+        checkboxGroup1: [],
+        checkboxGroup2: []
       };
     }
   }
diff --git a/examples/docs/fr-FR/color-picker.md b/examples/docs/fr-FR/color-picker.md
index c1bdc5d59..b75a43a59 100644
--- a/examples/docs/fr-FR/color-picker.md
+++ b/examples/docs/fr-FR/color-picker.md
@@ -32,13 +32,13 @@ ColorPicker est un sélecteur de couleur qui supporte plusieurs formats.
 
 :::demo ColorPicker supporte le canal alpha. Pour activer la sélection du canal alpha, ajoutez l'attribut `show-alpha`.
 ```html
-<el-color-picker v-model="color3" show-alpha></el-color-picker>
+<el-color-picker v-model="color" show-alpha></el-color-picker>
 
 <script>
   export default {
     data() {
       return {
-        color3: 'rgba(19, 206, 102, 0.8)'
+        color: 'rgba(19, 206, 102, 0.8)'
       }
     }
   };
@@ -51,7 +51,7 @@ ColorPicker est un sélecteur de couleur qui supporte plusieurs formats.
 :::demo ColorPicker supporte les couleurs prédéfinies.
 ```html
 <el-color-picker
-  v-model="color5"
+  v-model="color"
   show-alpha
   :predefine="predefineColors">
 </el-color-picker>
@@ -60,7 +60,7 @@ ColorPicker est un sélecteur de couleur qui supporte plusieurs formats.
   export default {
     data() {
       return {
-        color5: 'rgba(255, 69, 0, 0.68)',
+        color: 'rgba(255, 69, 0, 0.68)',
         predefineColors: [
           '#ff4500',
           '#ff8c00',
@@ -88,16 +88,16 @@ ColorPicker est un sélecteur de couleur qui supporte plusieurs formats.
 
 :::demo
 ```html
-<el-color-picker v-model="color4"></el-color-picker>
-<el-color-picker v-model="color4" size="medium"></el-color-picker>
-<el-color-picker v-model="color4" size="small"></el-color-picker>
-<el-color-picker v-model="color4" size="mini"></el-color-picker>
+<el-color-picker v-model="color"></el-color-picker>
+<el-color-picker v-model="color" size="medium"></el-color-picker>
+<el-color-picker v-model="color" size="small"></el-color-picker>
+<el-color-picker v-model="color" size="mini"></el-color-picker>
 
 <script>
   export default {
     data() {
       return {
-        color4: '#409EFF'
+        color: '#409EFF'
       }
     }
   };
diff --git a/examples/docs/fr-FR/date-picker.md b/examples/docs/fr-FR/date-picker.md
index 864f67919..f55f24c07 100644
--- a/examples/docs/fr-FR/date-picker.md
+++ b/examples/docs/fr-FR/date-picker.md
@@ -25,7 +25,7 @@ L'unité de base du DatePicker est le jour.
       v-model="value2"
       type="date"
       placeholder="Choississez un jour"
-      :picker-options="pickerOptions1">
+      :picker-options="pickerOptions">
     </el-date-picker>
   </div>
 </template>
@@ -34,7 +34,7 @@ L'unité de base du DatePicker est le jour.
   export default {
     data() {
       return {
-        pickerOptions1: {
+        pickerOptions: {
           disabledDate(time) {
             return time.getTime() > Date.now();
           },
@@ -79,7 +79,7 @@ Vous pouvez sélectionner une semaine, un mois, une année ou plusieurs dates en
   <div class="block">
     <span class="demonstration">Semaine</span>
     <el-date-picker
-      v-model="value3"
+      v-model="value1"
       type="week"
       format="Week WW"
       placeholder="Sélectionnez une semaine">
@@ -88,7 +88,7 @@ Vous pouvez sélectionner une semaine, un mois, une année ou plusieurs dates en
   <div class="block">
     <span class="demonstration">Mois</span>
     <el-date-picker
-      v-model="value4"
+      v-model="value2"
       type="month"
       placeholder="Sélectionnez un mois">
     </el-date-picker>
@@ -98,7 +98,7 @@ Vous pouvez sélectionner une semaine, un mois, une année ou plusieurs dates en
   <div class="block">
     <span class="demonstration">Année</span>
     <el-date-picker
-      v-model="value5"
+      v-model="value3"
       type="year"
       placeholder="Sélectionnez une année">
     </el-date-picker>
@@ -107,7 +107,7 @@ Vous pouvez sélectionner une semaine, un mois, une année ou plusieurs dates en
     <span class="demonstration">Dates</span>
     <el-date-picker
       type="dates"
-      v-model="value14"
+      v-model="value4"
       placeholder="Sélectionnez une ou plusieurs dates">
     </el-date-picker>
   </div>
@@ -117,10 +117,10 @@ Vous pouvez sélectionner une semaine, un mois, une année ou plusieurs dates en
   export default {
     data() {
       return {
+        value1: '',
+        value2: '',
         value3: '',
-        value4: '',
-        value5: '',
-        value14: ''
+        value4: ''
       };
     }
   };
@@ -140,7 +140,7 @@ Vous pouvez sélectionner une plage de dates.
   <div class="block">
     <span class="demonstration">Défaut</span>
     <el-date-picker
-      v-model="value6"
+      v-model="value1"
       type="daterange"
       range-separator="à"
       start-placeholder="Date de début"
@@ -150,14 +150,14 @@ Vous pouvez sélectionner une plage de dates.
   <div class="block">
     <span class="demonstration">Avec raccourcis</span>
     <el-date-picker
-      v-model="value7"
+      v-model="value2"
       type="daterange"
       align="right"
       unlink-panels
       range-separator="à"
       start-placeholder="Date de début"
       end-placeholder="Date de fin"
-      :picker-options="pickerOptions2">
+      :picker-options="pickerOptions">
     </el-date-picker>
   </div>
 </template>
@@ -166,7 +166,7 @@ Vous pouvez sélectionner une plage de dates.
   export default {
     data() {
       return {
-        pickerOptions2: {
+        pickerOptions: {
           shortcuts: [{
             text: 'Semaine dernière',
             onClick(picker) {
@@ -193,8 +193,8 @@ Vous pouvez sélectionner une plage de dates.
             }
           }]
         },
-        value6: '',
-        value7: ''
+        value1: '',
+        value2: ''
       };
     }
   };
@@ -213,7 +213,7 @@ Picking a month range is supported.
   <div class="block">
     <span class="demonstration">Default</span>
     <el-date-picker
-      v-model="value15"
+      v-model="value1"
       type="monthrange"
       range-separator="To"
       start-placeholder="Start month"
@@ -223,14 +223,14 @@ Picking a month range is supported.
   <div class="block">
     <span class="demonstration">With quick options</span>
     <el-date-picker
-      v-model="value16"
+      v-model="value2"
       type="monthrange"
       align="right"
       unlink-panels
       range-separator="To"
       start-placeholder="Start month"
       end-placeholder="End month"
-      :picker-options="pickerOptions3">
+      :picker-options="pickerOptions">
     </el-date-picker>
   </div>
 </template>
@@ -239,7 +239,7 @@ Picking a month range is supported.
   export default {
     data() {
       return {
-        pickerOptions3: {
+        pickerOptions: {
           shortcuts: [{
             text: 'This month',
             onClick(picker) {
@@ -262,8 +262,8 @@ Picking a month range is supported.
             }
           }]
         },
-        value15: '',
-        value16: ''
+        value1: '',
+        value2: ''
       };
     }
   };
@@ -283,7 +283,7 @@ Si le type est `daterange`, `default-value` configure la panneau de gauche.
   <div class="block">
     <span class="demonstration">Date</span>
     <el-date-picker
-      v-model="value8"
+      v-model="value1"
       type="date"
       placeholder="Sélectionnez une date"
       default-value="2010-10-01">
@@ -292,7 +292,7 @@ Si le type est `daterange`, `default-value` configure la panneau de gauche.
   <div class="block">
     <span class="demonstration">Plage de dates</span>
     <el-date-picker
-      v-model="value9"
+      v-model="value2"
       type="daterange"
       align="right"
       start-placeholder="Date de début"
@@ -306,8 +306,8 @@ Si le type est `daterange`, `default-value` configure la panneau de gauche.
   export default {
     data() {
       return {
-        value8: '',
-        value9: ''
+        value1: '',
+        value2: ''
       };
     }
   };
@@ -353,9 +353,9 @@ Attention à la capitalisation !
 <template>
   <div class="block">
     <span class="demonstration">Émet un objet Date</span>
-    <div class="demonstration">Value: {{ value10 }}</div>
+    <div class="demonstration">Value: {{ value1 }}</div>
     <el-date-picker
-      v-model="value10"
+      v-model="value1"
       type="date"
       placeholder="Sélectionnez une date"
       format="yyyy/MM/dd">
@@ -363,9 +363,9 @@ Attention à la capitalisation !
   </div>
   <div class="block">
     <span class="demonstration">Utilise value-format</span>
-    <div class="demonstration">Value: {{ value11 }}</div>
+    <div class="demonstration">Value: {{ value2 }}</div>
     <el-date-picker
-      v-model="value11"
+      v-model="value2"
       type="date"
       placeholder="Sélectionnez une date"
       format="yyyy/MM/dd"
@@ -374,9 +374,9 @@ Attention à la capitalisation !
   </div>
   <div class="block">
     <span class="demonstration">Timestamp</span>
-    <div class="demonstration">Value：{{ value12 }}</div>
+    <div class="demonstration">Value：{{ value3 }}</div>
     <el-date-picker
-      v-model="value12"
+      v-model="value3"
       type="date"
       placeholder="Sélectionnez une date"
       format="yyyy/MM/dd"
@@ -389,9 +389,9 @@ Attention à la capitalisation !
   export default {
     data() {
       return {
-        value10: '',
-        value11: '',
-        value12: ''
+        value1: '',
+        value2: '',
+        value3: ''
       };
     }
   };
@@ -407,9 +407,9 @@ Lorsque vous choisissez une plage de dates, vous pouvez assigner l'horaire de d
 ```html
 <template>
   <div class="block">
-    <p>Valeur: {{ value13 }}</p>
+    <p>Valeur: {{ value }}</p>
     <el-date-picker
-      v-model="value13"
+      v-model="value"
       type="daterange"
       start-placeholder="Date de début"
       end-placeholder="Date de fin"
@@ -422,7 +422,7 @@ Lorsque vous choisissez une plage de dates, vous pouvez assigner l'horaire de d
   export default {
     data() {
       return {
-        value13: ''
+        value: ''
       };
     }
   };
diff --git a/examples/docs/fr-FR/input-number.md b/examples/docs/fr-FR/input-number.md
index c17d6a978..76016ed0a 100644
--- a/examples/docs/fr-FR/input-number.md
+++ b/examples/docs/fr-FR/input-number.md
@@ -8,13 +8,13 @@ Un champs d'input de valeurs numériques, avec un domaine personnalisable.
 
 ```html
 <template>
-  <el-input-number v-model="num1" @change="handleChange" :min="1" :max="10"></el-input-number>
+  <el-input-number v-model="num" @change="handleChange" :min="1" :max="10"></el-input-number>
 </template>
 <script>
   export default {
     data() {
       return {
-        num1: 1
+        num: 1
       };
     },
     methods: {
@@ -33,13 +33,13 @@ Un champs d'input de valeurs numériques, avec un domaine personnalisable.
 
 ```html
 <template>
-  <el-input-number v-model="num2" :disabled="true"></el-input-number>
+  <el-input-number v-model="num" :disabled="true"></el-input-number>
 </template>
 <script>
   export default {
     data() {
       return {
-        num2: 1
+        num: 1
       }
     }
   };
@@ -55,13 +55,13 @@ Vous pouvez déterminer un pas pour le champs.
 
 ```html
 <template>
-  <el-input-number v-model="num3" :step="2"></el-input-number>
+  <el-input-number v-model="num" :step="2"></el-input-number>
 </template>
 <script>
   export default {
     data() {
       return {
-        num3: 5
+        num: 5
       }
     }
   };
@@ -75,13 +75,13 @@ Vous pouvez déterminer un pas pour le champs.
 
 ```html
 <template>
-  <el-input-number v-model="num9" :precision="2" :step="0.1" :max="10"></el-input-number>
+  <el-input-number v-model="num" :precision="2" :step="0.1" :max="10"></el-input-number>
 </template>
 <script>
   export default {
     data() {
       return {
-        num9: 1
+        num: 1
       }
     }
   };
@@ -102,19 +102,19 @@ Utilisez l'attribut `size` pour régler la taille avec `medium`, `small` ou `min
 
 ```html
 <template>
-  <el-input-number v-model="num4"></el-input-number>
-    <el-input-number size="medium" v-model="num5"></el-input-number>
-    <el-input-number size="small" v-model="num6"></el-input-number>
-    <el-input-number size="mini" v-model="num7"></el-input-number>
+  <el-input-number v-model="num1"></el-input-number>
+    <el-input-number size="medium" v-model="num2"></el-input-number>
+    <el-input-number size="small" v-model="num3"></el-input-number>
+    <el-input-number size="mini" v-model="num4"></el-input-number>
 </template>
 <script>
   export default {
     data() {
       return {
-        num4: 1,
-        num5: 1,
-        num6: 1,
-        num7: 1
+        num1: 1,
+        num2: 1,
+        num3: 1,
+        num4: 1
       }
     }
   };
@@ -127,13 +127,13 @@ Utilisez l'attribut `size` pour régler la taille avec `medium`, `small` ou `min
 :::demo Réglez `controls-position` pour déterminer la position des boutons.
 ```html
 <template>
-  <el-input-number v-model="num8" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>
+  <el-input-number v-model="num" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>
 </template>
 <script>
   export default {
     data() {
       return {
-        num8: 1
+        num: 1
       };
     },
     methods: {
diff --git a/examples/docs/zh-CN/checkbox.md b/examples/docs/zh-CN/checkbox.md
index fd895b541..184fc352d 100644
--- a/examples/docs/zh-CN/checkbox.md
+++ b/examples/docs/zh-CN/checkbox.md
@@ -127,7 +127,7 @@
 ```html
 <template>
   <el-checkbox-group 
-    v-model="checkedCities1"
+    v-model="checkedCities"
     :min="1"
     :max="2">
     <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
@@ -138,7 +138,7 @@
   export default {
     data() {
       return {
-        checkedCities1: ['上海', '北京'],
+        checkedCities: ['上海', '北京'],
         cities: cityOptions
       };
     }
@@ -199,21 +199,21 @@
 ```html
 <template>
   <div>
-    <el-checkbox v-model="checked3" label="备选项1" border></el-checkbox>
-    <el-checkbox v-model="checked4" label="备选项2" border></el-checkbox>
+    <el-checkbox v-model="checked1" label="备选项1" border></el-checkbox>
+    <el-checkbox v-model="checked2" label="备选项2" border></el-checkbox>
   </div>
   <div style="margin-top: 20px">
-    <el-checkbox v-model="checked5" label="备选项1" border size="medium"></el-checkbox>
-    <el-checkbox v-model="checked6" label="备选项2" border size="medium"></el-checkbox>
+    <el-checkbox v-model="checked3" label="备选项1" border size="medium"></el-checkbox>
+    <el-checkbox v-model="checked4" label="备选项2" border size="medium"></el-checkbox>
   </div>
   <div style="margin-top: 20px">
-    <el-checkbox-group v-model="checkboxGroup5" size="small">
+    <el-checkbox-group v-model="checkboxGroup1" size="small">
       <el-checkbox label="备选项1" border></el-checkbox>
       <el-checkbox label="备选项2" border disabled></el-checkbox>
     </el-checkbox-group>
   </div>
   <div style="margin-top: 20px">
-    <el-checkbox-group v-model="checkboxGroup6" size="mini" disabled>
+    <el-checkbox-group v-model="checkboxGroup2" size="mini" disabled>
       <el-checkbox label="备选项1" border></el-checkbox>
       <el-checkbox label="备选项2" border></el-checkbox>
     </el-checkbox-group>
@@ -224,12 +224,12 @@
   export default {
     data () {
       return {
-        checked3: true,
-        checked4: false,
-        checked5: false,
-        checked6: true,
-        checkboxGroup5: [],
-        checkboxGroup6: []
+        checked1: true,
+        checked2: false,
+        checked3: false,
+        checked4: true,
+        checkboxGroup1: [],
+        checkboxGroup2: []
       };
     }
   }
diff --git a/examples/docs/zh-CN/color-picker.md b/examples/docs/zh-CN/color-picker.md
index af0db6ac6..7608399a0 100644
--- a/examples/docs/zh-CN/color-picker.md
+++ b/examples/docs/zh-CN/color-picker.md
@@ -32,13 +32,13 @@
 
 :::demo ColorPicker 支持普通颜色，也支持带 Alpha 通道的颜色，通过`show-alpha`属性即可控制是否支持透明度的选择。
 ```html
-<el-color-picker v-model="color3" show-alpha></el-color-picker>
+<el-color-picker v-model="color" show-alpha></el-color-picker>
 
 <script>
   export default {
     data() {
       return {
-        color3: 'rgba(19, 206, 102, 0.8)'
+        color: 'rgba(19, 206, 102, 0.8)'
       }
     }
   };
@@ -51,7 +51,7 @@
 :::demo ColorPicker 支持预定义颜色
 ```html
 <el-color-picker
-  v-model="color5"
+  v-model="color"
   show-alpha
   :predefine="predefineColors">
 </el-color-picker>
@@ -60,7 +60,7 @@
   export default {
     data() {
       return {
-        color5: 'rgba(255, 69, 0, 0.68)',
+        color: 'rgba(255, 69, 0, 0.68)',
         predefineColors: [
           '#ff4500',
           '#ff8c00',
@@ -88,16 +88,16 @@
 
 :::demo
 ```html
-<el-color-picker v-model="color4"></el-color-picker>
-<el-color-picker v-model="color4" size="medium"></el-color-picker>
-<el-color-picker v-model="color4" size="small"></el-color-picker>
-<el-color-picker v-model="color4" size="mini"></el-color-picker>
+<el-color-picker v-model="color"></el-color-picker>
+<el-color-picker v-model="color" size="medium"></el-color-picker>
+<el-color-picker v-model="color" size="small"></el-color-picker>
+<el-color-picker v-model="color" size="mini"></el-color-picker>
 
 <script>
   export default {
     data() {
       return {
-        color4: '#409EFF'
+        color: '#409EFF'
       }
     }
   };
diff --git a/examples/docs/zh-CN/date-picker.md b/examples/docs/zh-CN/date-picker.md
index 73d5b5131..c9bf17863 100644
--- a/examples/docs/zh-CN/date-picker.md
+++ b/examples/docs/zh-CN/date-picker.md
@@ -25,7 +25,7 @@
       align="right"
       type="date"
       placeholder="选择日期"
-      :picker-options="pickerOptions1">
+      :picker-options="pickerOptions">
     </el-date-picker>
   </div>
 </template>
@@ -34,7 +34,7 @@
   export default {
     data() {
       return {
-        pickerOptions1: {
+        pickerOptions: {
           disabledDate(time) {
             return time.getTime() > Date.now();
           },
@@ -78,7 +78,7 @@
   <div class="block">
     <span class="demonstration">周</span>
     <el-date-picker
-      v-model="value3"
+      v-model="value1"
       type="week"
       format="yyyy 第 WW 周"
       placeholder="选择周">
@@ -87,7 +87,7 @@
   <div class="block">
     <span class="demonstration">月</span>
     <el-date-picker
-      v-model="value4"
+      v-model="value2"
       type="month"
       placeholder="选择月">
     </el-date-picker>
@@ -97,7 +97,7 @@
   <div class="block">
     <span class="demonstration">年</span>
     <el-date-picker
-      v-model="value5"
+      v-model="value3"
       type="year"
       placeholder="选择年">
     </el-date-picker>
@@ -106,7 +106,7 @@
     <span class="demonstration">多个日期</span>
     <el-date-picker
       type="dates"
-      v-model="value14"
+      v-model="value4"
       placeholder="选择一个或多个日期">
     </el-date-picker>
   </div>
@@ -116,10 +116,10 @@
   export default {
     data() {
       return {
+        value1: '',
+        value2: '',
         value3: '',
-        value4: '',
-        value5: '',
-        value14: ''
+        value4: ''
       };
     }
   };
@@ -137,7 +137,7 @@
   <div class="block">
     <span class="demonstration">默认</span>
     <el-date-picker
-      v-model="value6"
+      v-model="value1"
       type="daterange"
       range-separator="至"
       start-placeholder="开始日期"
@@ -147,14 +147,14 @@
   <div class="block">
     <span class="demonstration">带快捷选项</span>
     <el-date-picker
-      v-model="value7"
+      v-model="value2"
       type="daterange"
       align="right"
       unlink-panels
       range-separator="至"
       start-placeholder="开始日期"
       end-placeholder="结束日期"
-      :picker-options="pickerOptions2">
+      :picker-options="pickerOptions">
     </el-date-picker>
   </div>
 </template>
@@ -163,7 +163,7 @@
   export default {
     data() {
       return {
-        pickerOptions2: {
+        pickerOptions: {
           shortcuts: [{
             text: '最近一周',
             onClick(picker) {
@@ -190,8 +190,8 @@
             }
           }]
         },
-        value6: '',
-        value7: ''
+        value1: '',
+        value2: ''
       };
     }
   };
@@ -210,7 +210,7 @@
   <div class="block">
     <span class="demonstration">默认</span>
     <el-date-picker
-      v-model="value15"
+      v-model="value1"
       type="monthrange"
       range-separator="至"
       start-placeholder="开始月份"
@@ -220,14 +220,14 @@
   <div class="block">
     <span class="demonstration">带快捷选项</span>
     <el-date-picker
-      v-model="value16"
+      v-model="value2"
       type="monthrange"
       align="right"
       unlink-panels
       range-separator="至"
       start-placeholder="开始月份"
       end-placeholder="结束月份"
-      :picker-options="pickerOptions3">
+      :picker-options="pickerOptions">
     </el-date-picker>
   </div>
 </template>
@@ -236,7 +236,7 @@
   export default {
     data() {
       return {
-        pickerOptions3: {
+        pickerOptions: {
           shortcuts: [{
             text: '本月',
             onClick(picker) {
@@ -259,8 +259,8 @@
             }
           }]
         },
-        value15: '',
-        value16: ''
+        value1: '',
+        value2: ''
       };
     }
   };
@@ -305,9 +305,9 @@
 <template>
   <div class="block">
     <span class="demonstration">默认为 Date 对象</span>
-    <div class="demonstration">值：{{ value10 }}</div>
+    <div class="demonstration">值：{{ value1 }}</div>
     <el-date-picker
-      v-model="value10"
+      v-model="value1"
       type="date"
       placeholder="选择日期"
       format="yyyy 年 MM 月 dd 日">
@@ -315,9 +315,9 @@
   </div>
   <div class="block">
     <span class="demonstration">使用 value-format</span>
-    <div class="demonstration">值：{{ value11 }}</div>
+    <div class="demonstration">值：{{ value2 }}</div>
     <el-date-picker
-      v-model="value11"
+      v-model="value2"
       type="date"
       placeholder="选择日期"
       format="yyyy 年 MM 月 dd 日"
@@ -326,9 +326,9 @@
   </div>
   <div class="block">
     <span class="demonstration">时间戳</span>
-    <div class="demonstration">值：{{ value12 }}</div>
+    <div class="demonstration">值：{{ value3 }}</div>
     <el-date-picker
-      v-model="value12"
+      v-model="value3"
       type="date"
       placeholder="选择日期"
       format="yyyy 年 MM 月 dd 日"
@@ -341,9 +341,9 @@
   export default {
     data() {
       return {
-        value10: '',
-        value11: '',
-        value12: ''
+        value1: '',
+        value2: '',
+        value3: ''
       };
     }
   };
@@ -359,9 +359,9 @@
 ```html
 <template>
   <div class="block">
-    <p>组件值：{{ value13 }}</p>
+    <p>组件值：{{ value }}</p>
     <el-date-picker
-      v-model="value13"
+      v-model="value"
       type="daterange"
       start-placeholder="开始日期"
       end-placeholder="结束日期"
@@ -374,7 +374,7 @@
   export default {
     data() {
       return {
-        value13: ''
+        value: ''
       };
     }
   };
diff --git a/examples/docs/zh-CN/input-number.md b/examples/docs/zh-CN/input-number.md
index 8069a5df8..3961be6a1 100644
--- a/examples/docs/zh-CN/input-number.md
+++ b/examples/docs/zh-CN/input-number.md
@@ -7,13 +7,13 @@
 :::demo 要使用它，只需要在`el-input-number`元素中使用`v-model`绑定变量即可，变量的初始值即为默认值。
 ```html
 <template>
-  <el-input-number v-model="num1" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
+  <el-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
 </template>
 <script>
   export default {
     data() {
       return {
-        num1: 1
+        num: 1
       };
     },
     methods: {
@@ -32,13 +32,13 @@
 
 ```html
 <template>
-  <el-input-number v-model="num2" :disabled="true"></el-input-number>
+  <el-input-number v-model="num" :disabled="true"></el-input-number>
 </template>
 <script>
   export default {
     data() {
       return {
-        num2: 1
+        num: 1
       }
     }
   };
@@ -54,13 +54,13 @@
 
 ```html
 <template>
-  <el-input-number v-model="num3" :step="2"></el-input-number>
+  <el-input-number v-model="num" :step="2"></el-input-number>
 </template>
 <script>
   export default {
     data() {
       return {
-        num3: 5
+        num: 5
       }
     }
   };
@@ -74,13 +74,13 @@
 
 ```html
 <template>
-  <el-input-number v-model="num9" :precision="2" :step="0.1" :max="10"></el-input-number>
+  <el-input-number v-model="num" :precision="2" :step="0.1" :max="10"></el-input-number>
 </template>
 <script>
   export default {
     data() {
       return {
-        num9: 1
+        num: 1
       }
     }
   };
@@ -101,19 +101,19 @@
 
 ```html
 <template>
-  <el-input-number v-model="num4"></el-input-number>
-  <el-input-number size="medium" v-model="num5"></el-input-number>
-  <el-input-number size="small" v-model="num6"></el-input-number>
-  <el-input-number size="mini" v-model="num7"></el-input-number>
+  <el-input-number v-model="num1"></el-input-number>
+  <el-input-number size="medium" v-model="num2"></el-input-number>
+  <el-input-number size="small" v-model="num3"></el-input-number>
+  <el-input-number size="mini" v-model="num4"></el-input-number>
 </template>
 <script>
   export default {
     data() {
       return {
-        num4: 1,
-        num5: 1,
-        num6: 1,
-        num7: 1
+        num1: 1,
+        num2: 1,
+        num3: 1,
+        num4: 1
       }
     }
   };
@@ -126,13 +126,13 @@
 :::demo 设置 `controls-position` 属性可以控制按钮位置。
 ```html
 <template>
-  <el-input-number v-model="num8" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>
+  <el-input-number v-model="num" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>
 </template>
 <script>
   export default {
     data() {
       return {
-        num8: 1
+        num: 1
       };
     },
     methods: {