can't update form-data with stored data

[loah8]

I want to make schema-form has stored data so that user can edit form-data whenever they want.
However once schema-form is created, I can't bind data through the method. ( I get the data from server through axios, and try to bind when vue page is created.)
plz check example below.

1. giving data when form is created - It's working

<schema-form :schema="schema" v-model="obj" @submit="handleSubmit()" />
data () {
return {
schemaIsValid: true,
schema: baseSchema,
obj: {
"firstName": "11111",
"nickNames": [
{
"url": "111111111111",
"title": "1111111111111"
}
]
},
}

2. (not-working) method driven way - click button, form data isn't updated.

<schema-form :schema="schema" v-model="obj" @submit="handleSubmit()" />
<button type="button" class="button" @click="UpdateData()">Update form Data

data () {
return {
schemaIsValid: true,
schema: baseSchema,
obj: {}
}
},
methods: {
handleSubmit() {
console.log(JSON.stringify(this.obj, null, 2))
}
,UpdateData() {
this.obj = baseData;
}
}

3. (not-working) binding data through axios when it's created.

<schema-form :schema="schema" v-model="obj" @submit="handleSubmit()" />

data () {
return {
schemaIsValid: true,
schema: baseSchema,
obj: {},
}
},
created() {
this.$http
.get(URL,{ headers: { 'Content-Type' : 'application/json'}})
.then( res => {
this.obj = JSON.parse(res.data..obj);
}
,function() {
console.log('failed')
});
},

check image below.
as you can see in the image, data is binded after axios or click event, but the form is still empty and the data is removed when click submit button.

[loah8]

I added 'watch' in schemaform.vue now it's working. (not sure it's right way...)
I will close this issue after update commit is pushed from @crickford

watch: {
schema() {
this.items = scaffoldFromSchema(this.schema)
ajv = new Ajv({allErrors: true, jsonPointers: true, format: 'full'})
},
value(val) {
this.value = val;
this.items = val;
}

[crickford]

The SchemaForm component was not designed to auto update when initial data is updated. The reason for this is that any user-entered data would be lost when the prop changes.

This could be a useful feature - given an appropriate merging strategy between the internal state (this.items) and any changes to the value prop - hence I'm marking this as a possible future enhancement.

For now, a workaround you can use is to wait for the AJAX request to finish before mounting the schema-form component:

<template>
  <schema-form v-if="defaultDataLoaded" :schema="schema" v-model="obj" @submit="handleSubmit()" />
</template>

<script>
export default {
  data() {
    return {
      defaultDataLoaded: false,
      obj: {},
      schema: {
        ...
      }
    }
  },
  created() {
    this.$http
      .get(URL,{ headers: { 'Content-Type' : 'application/json'}})
      .then( res => {
        this.obj = JSON.parse(res.data.obj);
        this.defaultDataLoaded = true
      })
  }
}
</script>

example codepen