title: How to force VueJS custom component to re-render itself and all its child component
body: <p>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.</p>
  <p>So when I update the JSON on backend using AJAX, I would like re-render everything upon successful post.</p>
  <p>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.</p>
  <p>I looked into  <a href="https://v2.vuejs.org/v2/api/#vm-forceUpdate" rel="nofollow noreferrer">forceUpdate</a> API, which is applicable for current component only. It does not affect child components.</p>
  <p>So looks like handling forceUpdate on every component is the only way to go in my use case?</p>
  <p><a href="https://i.stack.imgur.com/4mRG2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4mRG2.png" alt="enter image description here" /></a></p>
  <p>Based on the diagram you can see that in the MainFrom component is top level component. Following is the template for the MainForm:</p>
  <pre><code>&lt;template&gt;
   &lt;div&gt;
      &lt;div v-for=&quot;(entity, index) of mySchemaChunks &gt;
           &lt;FormSection :componentList=&quot;entity&quot; /&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
  
  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
         }
  
     }
  }
  &lt;/script&gt;
  </code></pre>
  <p>Here is the high level overview of section</p>
  <pre><code>&lt;template&gt;
  &lt;div&gt;
     // Render the list of entity passed to it as property in v-for 
     // This will add the dynamic Vue components as its children
  &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>