前端：input框或时间控件无法修改

问题描述：修改时input框或时间无法修改（input无法输入新的内容，时间控件无法选择其他时间。在新增时，可正常输入内容。

点击修改时触发的事件为：

stepUpdate(row){
    getAlarmStep(row.alarmcode,row.stepid).then(response=>{
        this.stepForm = response.data;
        this.stepForm = this.stepForm.list0504 == undefined ? [] : this.stepForm.list0504;
        //后台返回的beginendtime为一个字符串，型如： 01:02:02~03:02:02
        //但时间控件所需的是一个数组
        //所以 构造时间 （返回的对象里没有beginendtimes）
        this.stepForm['list0504'].forEach(item=>{
            item.beginendtimes = item.beginendtime.split('~');
        });
        //此时stepForm里没有codeinfo这个属性 但我们需要它
        this.stepForm.codeinfo = this.stepForm.list0503[0].codeinfo;
    })
}

stepForm表单里一个input框绑定的数据为stepForm.codeinfo。一个时间控件绑定的数组为stepForm.list0504[i].beginendtimes。

由于input框的问题和时间控件的问题属于同类问题，这里以input框为例子讲解。

如上代码中，是直接将返回数据赋给stepForm，然后再对stepForm进行属性的构造和数据的构造。

这种写法，点击修改后，codeinfo对应的input框和beginendtimes对应的时间控件可以将数据正常展示，但是却无法对数据内容进行修改。

将代码修改成如下写法：

先将返回的数据赋给一个对象object，对object进行属性的构造和数据的构造的操作，然后将构造好的object赋给表单对象stepForm。

stepUpdate(row){
    getAlarmStep(row.alarmcode,row.stepid).then(response=>{
        let object = response.data;
        object = object.list0504 == undefined ? [] : object.list0504;
        //后台返回的beginendtime为一个字符串，型如： 01:02:02~03:02:02
        //但时间控件所需的是一个数组
        //所以 构造时间 （返回的对象里没有beginendtimes）
        object['list0504'].forEach(item=>{
            item.beginendtimes = item.beginendtime.split('~');
        });
        //此时stepForm里没有codeinfo这个属性 但我们需要它
        object.codeinfo = object.list0503[0].codeinfo;
        //将object赋给stepForm
        this.stepForm = object;
    })
}

如上代码，在修改时不会出现无法修改的情况。

疑问：不明白为什么第一种写法会出现问题？先赋值再构造和先构造再赋值 对于绑定数据而言有什么区别？这是vue的什么特性导致的吗？