Vue v-model loop binding data problem

vue v-model circularly binds data to different input boxes, but the data is Synchronize. Why?

related codes

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
    <div class="container" id="app">
        <el-form ref="addForm" :model="customerInfo" label-width="100px">
            <el-form-item label=":">
              <el-select v-model="customerInfo.babyCount" placeholder=":" @change="setChildList">
                <el-option label="" value="0"></el-option>
                <el-option label="1" value="1">1</el-option>
                <el-option label="2" value="2">2</el-option>
                <el-option label="3" value="3">3</el-option>
                <el-option label="4" value="4">4</el-option>
              </el-select>
            </el-form-item>
            <div class="childrenList" v-show="customerInfo.babyInfoJson.length > 0">
              <div class="child" :key="key" v-for="(child, key) in customerInfo.babyInfoJson">
                <h4 class="title">{{key+1}} </h4>
                <el-form-item label=":">
                  <el-input v-model="child.babyName"></el-input>
                </el-form-item>
                {{child}}
              </div>
            </div>
            {{customerInfo.babyInfoJson}}
        </el-form>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
        let vue = new Vue({
            el: "-sharpapp",
            data(){
                return {
                    baby: {
                      babyName: ""
                    },
                    customerInfo: {
                      babyCount: "",
                      babyInfoJson: [],
                    }
                }
            },
            methods: {
                setChildList(){
                    let length = parseInt(this.customerInfo.babyCount, 10);
                    if(length <= 0){
                      this.customerInfo.babyInfoJson = [];
                      return;
                    }
                    this.customerInfo.babyInfoJson = [];
                    let baby = this.baby;
                    for(let i = 0; i < length; i += 1){
                      this.customerInfo.babyInfoJson.push(baby);
                    }
                },
            }
        })
    </script>
</body>
</html>

what result do you expect? What is the error message actually seen?

originally intended to loop out, get the value of each bound data, and then submit it to the background, now modify an other input box will be modified together, I do not know why?

methods: { initBady() {return {babyName: ''}}, setChildList(){ let length = parseInt(this.customerInfo.babyCount, 10); if(length <= 0){ this.customerInfo.babyInfoJson = []; return; } this.customerInfo.babyInfoJson = []; for(let i = 0; i < length; i += 1){ let baby = this.initBady(); this.customerInfo.babyInfoJson.push(baby); } }, }