title: Component inside Component - VueJS
body: <p>I am having a hard time to understand this, so I have a component which is already complied which is a <code>grid</code>, now when I click on a button a modal pops-up and display another grid inside the modal at this point my code looks like this for the modal pop-up</p>
  
  <pre><code>&lt;template&gt;
  
      &lt;transition v-if="this.modalVisible" v-bind:title.sync="this.modalVisible" name="modal"&gt;
          &lt;div class="modal-mask"&gt;
              &lt;div class="modal-wrapper"&gt;
                  &lt;div class="modal-container"&gt;
  
                      &lt;div class="modal-header"&gt;
                          {{ modalHeaderName }}
                      &lt;/div&gt;
  
                      &lt;div class="modal-body"&gt;
                       //this is another component
                      &lt;grid-data :grid-values="dummy" :tool-bar="false"&gt;&lt;/grid-data&gt; 
                      &lt;/div&gt;
  
                      &lt;div class="modal-footer"&gt;
  
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/transition&gt;
  
  &lt;/template&gt;
  
  &lt;script&gt;
      import DataTable from './core/gridTable.vue';
  
  
      export default {
          components:{
              JqxButton,
              'grid-data' : DataTable,
          },
          props : {
              modalHeaderName : String,
              modalVisible : Boolean
          },
          data: function () {
              return {
                  buttonWidth: 120,
                  buttonHeight: '100%',
                  value: this.buttonName,
                  dummy : [
                      { name: 'ProductName', type: 'string' },
                      { name: 'QuantityPerUnit', type: 'int' },
                      { name: 'UnitPrice', type: 'float' },
                      { name: 'UnitsInStock', type: 'float' },
                      { name: 'Discontinued', type: 'bool' }
                  ],
              }
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>Now, the <code>grid</code> is a vue component which was already complied and rendered, now will I import it again it says</p>
  
  <blockquote>
    <p>[Vue warn]: Failed to mount component: template or render function not defined.</p>
  </blockquote>
  
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;!-- sync here is, getting the value from the updated modal--&gt;
          &lt;custom-modal :modal-visible="this.showModal"  v-bind:showModal.sync="showModal" :modal-header-name="this.modalHeaderName"&gt;&lt;/custom-modal&gt;
          &lt;JqxGrid :width="width" :source="dataAdapter" :columns="gridValues"
                   :pageable="true" :autoheight="true" :sortable="true"
                   :altrows="true" :enabletooltip="true" :editable="true"
                   :selectionmode="'multiplecellsadvanced'"  :showtoolbar="this.toolBar" :rendertoolbar="rendertoolbar"&gt;
          &lt;/JqxGrid&gt;
      &lt;/div&gt;
  
  &lt;/template&gt;
  &lt;script&gt;
      import JqxGrid from "../jqx-vue/vue_jqxgrid.vue";
      import CustomModal from "../customModal";
      export default {
          components: {
              JqxGrid,
              'custom-modal' : CustomModal
          },
          // added the name here
          name: 'jqx-grid',
          props : {
              gridValues : Array,
              toolBar : Boolean
          },
          data: function () {
              return {
                  showModal : false,
                  modalHeaderName : '',
                  width: '100%',
                  dataAdapter: new jqx.dataAdapter({
                       datatype: 'xml',
                       datafields : this.gridValues,
                       url: ''
                  }),
                  columns: []
              }
          },
          mounted: function () {
              this.createButtons();
          },
          methods: {
              rendertoolbar: function (toolbar) {
                  let buttonsContainer = document.createElement('div');
                  buttonsContainer.style.cssText = 'overflow: hidden; position: relative; margin: 5px;';
  
                  let addButtonContainer = document.createElement('div');
                  let deleteButtonContainer = document.createElement('div');
  
                  addButtonContainer.id = 'addButton';
                  deleteButtonContainer.id = 'deleteButton';
  
                  addButtonContainer.style.cssText = 'float: left; margin-left: 5px;padding-bottom:25px;';
                  deleteButtonContainer.style.cssText = 'float: left; margin-left: 5px;padding-bottom:25px;';
  
                  buttonsContainer.appendChild(addButtonContainer);
                  buttonsContainer.appendChild(deleteButtonContainer);
                  toolbar[0].appendChild(buttonsContainer);
              },
              createButtons: function () {
  
                  let addButtonOptions = {
                      height: 25, value: '&amp;nbsp; &lt;i class="fa fa-plus" style="padding-top:3px"&gt;&lt;/i&gt; &amp;nbsp;Add Items &amp;nbsp;',
                  };
                  let addButton = jqwidgets.createInstance('#addButton', 'jqxButton', addButtonOptions);
                  let deleteButtonOptions = {
                      height: 25, value: '&amp;nbsp; &lt;i class="fa fa-ban" style="padding-top:3px"&gt;&lt;/i&gt; &amp;nbsp;Remove All &amp;nbsp;',
                  };
                  let deleteButton = jqwidgets.createInstance('#deleteButton', 'jqxButton', deleteButtonOptions);
  
                  // add new row.
                  addButton.addEventHandler('click', (event) =&gt; {
                      this.showModal = true;
                      this.modalHeaderName = 'Bulk Add Items';
                  });
                  // delete selected row.
                  deleteButton.addEventHandler('click', (event) =&gt; {
                     // alert('delete')
                  });
  
              },
              cellsrenderer: function (row, columnsfield, value, defaulthtml, columnproperties, rowdata) {
                  if (value &lt; 20) {
                      return '&lt;span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #ff0000;"&gt;' + value + '&lt;/span&gt;';
                  }
                  else {
                      return '&lt;span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #008000;"&gt;' + value + '&lt;/span&gt;';
                  }
              }
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>How can I overcome this issue? </p>
  
  <p>I have seen question like this which says the component grid is trying to compile again and hence the error but I am not sure of that, so we should be using the complied version of the grid component.</p>
  
  <p>NOTE: Using Vue with Laravel 5.4</p>
  
  <p>Error Image <a href="https://i.stack.imgur.com/HXu8y.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HXu8y.png" alt="enter image description here"></a></p>