Using ref as pdf-content does not print layout html report

[Amkha]

Describe the bug When using ref in div tage, it print only when the data is available. Whithout data just print blank page since data_pdf is null. the data_pdf is content html from parent component referring by ref in div tag. below is my code

1. Parent component:

   <!-- <template>
   <v-container>
   <div ref="section_trial_balance" id="tblData">
          <table>
                       <tr class="pa-2">
                           <th style="width: 500px; text-align: center;">Description</th>
                       </tr>
                       <tr class="pa-2 tr0">
                           <td class="pa-2 td0">{{0}}</td>
                       </tr>
           <table>
   </div> 
   <SideBarRight @clicked="onClickChild" :fromdate="from_date" :todate="to_date" :repno="rep_no" :data_excel="t_balance" :tableId="'tblData'" :data_pdf="this.$refs.section_trial_balance"></SideBarRight>
   </v-container>
   </template>   -->
   data: () => ({
          trial_balance: []
   })

2. Child component(SideBar-Right):

   <template>
      <div>
       <vue-html2pdf
         :show-layout="false"
         :float-layout="false"
         :enable-download="true"
         :preview-modal="true"
         :paginate-elements-by-height="1100"
         :pdf-quality="2"
         :manual-pagination="true"
         pdf-format="a4"
         pdf-orientation="portrait"
         pdf-content-width="800px"
         @hasStartedGeneration="hasStartedGeneration()"
         @hasGenerated="hasGenerated($event)"
         ref="html2Pdf"
         filename="mcfin_filename"
         <section slot="pdf-content">
             <v-container>
                    <v-card v-html="html_doc"></v-card>
              </v-container>
         </section>
       </vue-html2pdf>
     </div>
   </template>
   import VueHtml2pdf from 'vue-html2pdf'
   export default {
   name: 'side-bar-right',
   components: {
      VueHtml2pdf
   },
   props: ['data_excel', 'tableId','data_pdf','repno', 'to_date'],
   data () {
     return {
       pdf_filename: '',
       html_doc: '',
       }
    }
   methods: {
     exportPdf(){
       console.log("PDF:", this.data_pdf)      // this gives null when no data generated and not print layout <table>
       this.html_doc = this.data_pdf.outerHTML 
       this.$refs.html2Pdf.generatePdf()
     },
   }

   jason.package: "sass": "^1.56.1", "sass-loader": "^8.0.2", "vue": "^2.6.12", "vue-loader": "^15.9.5", "vue-template-compiler": "^2.6.10" "vue-html2pdf": "^1.8.0", "vuetify": "^2.6.12", "vue-router": "^3.5.1", "vuex": "^3.6.2",

And handle event gives some errors Please help !!!!

[Amkha]

not visible either here....