How to force VueJS custom component to re-render i

Question

I have a use case where I have a custom Vue Component that populates its child components dynamically using the JSON. When this top level vue component is created it loads all the children components using the JSON. I have a provision where I can add additional controls on the form when I update the JSON from which it renders itself.

So when I update the JSON on backend using AJAX, I would like re-render everything upon successful post.

Also I came across few articles that say that the regenerating the Form on Custom Vue component should be handled using v-show and/or v-if directive. This will not fit with my use case.

I looked into forceUpdate API, which is applicable for current component only. It does not affect child components.

So looks like handling forceUpdate on every component is the only way to go in my use case?

Based on the diagram you can see that in the MainFrom component is top level component. Following is the template for the MainForm:

<template>
 <div>
    <div v-for="(entity, index) of mySchemaChunks >
         <FormSection :componentList="entity" />
    </div>
  </div>
</template>
<script>

export default {
   store,

   computed: {
      mySchemaChunks() {
         // returns the chunks from schema (schema is stored in Vuex) 
         // where each chunks is array (segments of schema)
         // Each chunk is a section that has its own list of 
         // controls. 
      }
   },

   methods: {
       addNewJsonSchemaNodes() {
         // This function will update master Json schema in the backend
         // using AJAX which was used to generate the JSON from which
         // we generate the MainFrom and all its children
         // When App is initialized it prepares the JSON to generate
         // MainForm and store that JSON in the Vuex module as schema 
         // and model object

         // I do an AJAX post here which only send me status 200
         // This is not enough for me to re-render and generate all
         // dynamic component

         // May be I should try to get back the JSON after successful
         // update of Master JSON in backend ... so that I can update 
         // my Vuex module schema and model object with new values ...
         // And that should do the trick and all components (parent to 
         // children will be rendered ...????

         // Edit: OK.. Now I am getting the data back from AJAX post 
         // which is now rendering the entire form
       }

   }
}
</script>

Here is the high level overview of section

<template>
<div>
   // Render the list of entity passed to it as property in v-for 
   // This will add the dynamic Vue components as its children
</div>
</template>

Answer 1

forceUpdate() won't rerender children component UI, but tracked properties will.

In your case. You need to bind the data to component at first. Once ajax response back, you just call Vue.set to update the data bound and it will automatically update the children components