vue复用新增和编辑表单

1. 将数据放到computed中，不能放到data中，如果放到data中则在表单中的input，select等的v-model属性是不能赋值的，如：v-model='form.type_id'，如果新增，那么form.type_id是没有内容的，会报错，cannt read property type_id of null，尝试实用lodash的_.get(form,'type_id',0)会报错，filter也不行。
2. 代码

<el-dialog title="添加" :visible.sync="isOpenModal">
            <el-form label-width="70px">
                <el-form-item label="商品类型" label-width="70px">
                    <el-select placeholder="请选择" v-model="form.utype_id">
                        <el-option
                                v-for="item in goodsType"
                                :key="item.id"
                                :label="item.u_name"
                                :value="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="商品名称">
                    <el-input v-model="form.ugoods_name"></el-input>
                </el-form-item>
                <el-form-item label="缩略图">
                    <el-upload
                            class="avatar-uploader"
                            :action="uploadUrl"
                            :headers="uploadHeaders"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload"
                    >
                        <img
                                v-if="imageUrl"
                                :src="imageUrl"
                                class="avatar"
                        />
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="售价">
                    <el-input v-model="form.price"></el-input>
                </el-form-item>
                <el-form-item label="库存">
                    <el-input v-model="form.stock"></el-input>
                </el-form-item>
                <el-form-item label="状态">
                    <template>
                        <el-radio v-model="form.status" :label="1">上架</el-radio>
                        <el-radio v-model="form.status" :label="2">下架</el-radio>
                    </template>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="isOpenModal = false">取 消</el-button>
                <el-button type="primary" @click="saveGoods">确 定</el-button>
            </span>
        </el-dialog>

computed: {
            form() {
                if (this.formData === null) {
                    return {
                        utype_id: '',
                        ugoods_name: '',
                        price: 0,
                        stock: 0,
                        status: 1,
                        picture: '',
                    }
                } else {
                    return this.formData;
                }
            }
        },
      data() {
            return {
                formData: {},
                action: '',
                isOpenModal: false,
            };
        },
        mounted() {
            this.getData();
        },
        watch: {
            isOpenModal(newV, oldV) {
                console.log(oldV, newV)
                if (newV !== oldV && newV === false) {
                    this.formData = {};
                }
            }
        },