title: [Vue warn]: Error in render: "TypeError: Cannot read properties of undefined (reading 'length')" error when using datatables in vue
body: <p>In my laravel vuejs application I have following vue to display some data inside a datatable .</p>
  <p>For the better user experience, I have added a Show more option to load data.</p>
  <pre><code>&lt;show-more :data-size=&quot;documents.length&quot; increment-amount=&quot;5&quot; &gt;
              &lt;div  slot-scope=&quot;{ showMore, showAmount }&quot;&gt;
  
                  &lt;div v-bind:class = &quot;selectedForAction.count() === 0 ? 'h-15' : ''&quot;&gt;
                      &lt;action-bar :count=&quot;selectedForAction.count()&quot;&gt;
  
                          &lt;div slot=&quot;table-header&quot; class=&quot;flex items-center justify-between  bg-white border-certstyle-border border-b rounded-t py-4 px-10 w-full &quot;&gt;
  
                              &lt;!--Course --&gt;
                              &lt;div class=&quot;flex items-center rounded-full w-22 overflow-hidden shadow-soft&quot;&gt;
                                  &lt;selectable-all item=&quot;selectAll&quot; :data=&quot;documents&quot; @select=&quot;selectAll&quot;&gt;&lt;/selectable-all&gt;
                              &lt;/div&gt;
  
                              &lt;div class=&quot;flex flex-col items-left text-left w-10/12&quot;&gt;
                                  Document
                              &lt;/div&gt;
  
                              &lt;div class=&quot;w-74 text-left&quot;  item=&quot;validFor&quot;&gt;
                                  Valid until
                              &lt;/div&gt;
  
                              &lt;div class=&quot;w-1/12 text-center&quot; item=&quot;status&quot;&gt;
                                  Validity
                              &lt;/div&gt;
                              &lt;div class=&quot;px-8 w-32&quot;&gt;
                              &lt;/div&gt;
                              &lt;div class=&quot;px-8&quot;&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;button v-if=&quot;selectedForAction.count() === 1&quot; @click=&quot;editSelectedDocument&quot; class=&quot;flex items-center text-certstyle-titles text-sm mx-4&quot; &gt;
                              &lt;span class=&quot;mr-1&quot;&gt;
                                  &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;16&quot; height=&quot;16&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; class=&quot;feather feather-edit-2&quot;&gt;&lt;path d=&quot;M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;
                              &lt;/span&gt;
                              &lt;span class=&quot;font-bold&quot;&gt;Edit&lt;/span&gt;
                          &lt;/button&gt;
                          &lt;button @click=&quot;removeSelectedDocument&quot; class=&quot;flex items-center text-certstyle-titles text-sm mx-4&quot; &gt;
                              &lt;span class=&quot;mr-1&quot;&gt;
                                  &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;16&quot; height=&quot;16&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; class=&quot;feather feather-x-square&quot;&gt;&lt;rect x=&quot;3&quot; y=&quot;3&quot; width=&quot;18&quot; height=&quot;18&quot; rx=&quot;2&quot; ry=&quot;2&quot;&gt;&lt;/rect&gt;&lt;line x1=&quot;9&quot; y1=&quot;9&quot; x2=&quot;15&quot; y2=&quot;15&quot;&gt;&lt;/line&gt;&lt;line x1=&quot;15&quot; y1=&quot;9&quot; x2=&quot;9&quot; y2=&quot;15&quot;&gt;&lt;/line&gt;&lt;/svg&gt;
                              &lt;/span&gt;
                              &lt;span class=&quot;font-bold&quot;&gt;Remove&lt;/span&gt;
                          &lt;/button&gt;
                      &lt;/action-bar&gt;
                  &lt;/div&gt;
  
                  &lt;!--Certificates--&gt;
                  &lt;div v-if=&quot;documents[index] !== undefined&quot;  v-for=&quot;(i, index) in showAmount&quot; class=&quot;flex items-center justify-between  border-certstyle-border border-b px-10 py-1 hover:bg-certstyle-background-light transition-colors duration-150&quot;&gt;
  
                      &lt;!--Certificate institute image--&gt;
                      &lt;div class=&quot;flex items-center &quot; item=&quot;certificatedChecked&quot; &gt;
                          &lt;div class=&quot;relative&quot;&gt;
                              &lt;div class=&quot;rounded-full h-14 w-10 overflow-hidden shadow-soft pt-4&quot;&gt;
                                  &lt;selectable
                                      v-model=&quot;selectedForAction&quot;
                                      :item=&quot;documents[index].id&quot;
                                      :ref=&quot;documents[index].id&quot;
                                  &gt;&lt;/selectable&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                      &lt;div class=&quot;flex flex-col items-left text-left w-10/12&quot; item=&quot;certificate&quot;&gt;
                          &lt;span :title=&quot;documents[index].name&quot; style=&quot;cursor: help;&quot; class=&quot;text-certstyle-titles font-bold cursor-help&quot;&gt;{{ documents[index].name }}&lt;/span&gt;
                      &lt;/div&gt;
  
                      &lt;!--Certificate due date--&gt;
                      &lt;div  class=&quot;w-74 text-left&quot; item=&quot;validFor&quot;&gt;
                          &lt;p class=&quot;text-sm valid-until not-applicable&quot; v-if=&quot;documents[index].is_valid_forever&quot;&gt;{{ 'Indefinite'}}&lt;/p&gt;
                          &lt;p class=&quot;text-sm valid-until&quot; v-else&gt;{{ documents[index].expires_at_formatted }}&lt;/p&gt;
                      &lt;/div&gt;
  
                      &lt;!-- Certificate status--&gt;
                      &lt;div class=&quot;w-48 text-center&quot; item=&quot;status&quot;&gt;
                          &lt;status :status=&quot;documents[index].validity_status.toLowerCase()&quot;&gt;&lt;/status&gt;
                      &lt;/div&gt;
  
                      &lt;!--Download icon--&gt;
                      &lt;div  class=&quot;cs--dashboard-employee-certificate-index--certificate-download-icon px-8&quot; item=&quot;download&quot;&gt;
                          &lt;a v-if=&quot;documents[index].url !== null&quot; :href=&quot;getDocumentDownloadLocation(documents[index].id)&quot; class=&quot;text-certstyle-text-light&quot;&gt;
                              &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;24&quot; height=&quot;24&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; class=&quot;feather feather-download&quot;&gt;&lt;path d=&quot;M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4&quot;&gt;&lt;/path&gt;&lt;polyline points=&quot;7 10 12 15 17 10&quot;&gt;&lt;/polyline&gt;&lt;line x1=&quot;12&quot; y1=&quot;15&quot; x2=&quot;12&quot; y2=&quot;3&quot;&gt;&lt;/line&gt;&lt;/svg&gt;
                          &lt;/a&gt;
                      &lt;/div&gt;
  
                      &lt;!--Preview icon--&gt;
                      &lt;div  class=&quot;cs--dashboard-employee-certificate-index--certificate-download-icon px-8&quot; item=&quot;view&quot;&gt;
                          &lt;a v-if=&quot;documents[index].url !== null&quot; target=&quot;_blank&quot; :href=&quot;getDocumentPreviewLocation(documents[index].id)&quot; class=&quot;text-certstyle-text-light&quot;&gt;
                              &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;24&quot; height=&quot;24&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; class=&quot;feather feather-eye&quot;&gt;&lt;path d=&quot;M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z&quot;&gt;&lt;/path&gt;&lt;circle cx=&quot;12&quot; cy=&quot;12&quot; r=&quot;3&quot;&gt;&lt;/circle&gt;&lt;/svg&gt;
                          &lt;/a&gt;
                      &lt;/div&gt;
  
                      &lt;div class=&quot;w-0 flex justify-end&quot;&gt;
                          &lt;edit-documents-modal :document=&quot;documents[index]&quot; :identifier=&quot;`editDocument${documents[index].id}`&quot;&gt;&lt;/edit-documents-modal&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div class=&quot;relative flex items-center justify-center&quot;&gt;
                      &lt;!--Show more button--&gt;
                      &lt;button class=&quot;absolute border focus:outline-none hover:bg-certstyle-orange bg-white border-certstyle-orange hover:text-white text-certstyle-orange font-bold text-sm rounded px-4 py-1 mt-32 &quot; v-if=&quot;showAmount &lt; documents.length&quot; @click=&quot;showMore&quot;&gt;
                          show more documents
                      &lt;/button&gt;
                  &lt;/div&gt;
  
              &lt;/div&gt;
  
          &lt;/show-more&gt;
  </code></pre>
  <p>Now the issue is, When I tried to run this, I get following console error and my data table is not getting displayed. Not even the headers...</p>
  <blockquote>
  <p>[Vue warn]: Error in render: &quot;TypeError: Cannot read properties of
  undefined (reading 'length')&quot;</p>
  </blockquote>