How to load component after a tab is clicked on Vue JS with Bootstrap Vue?

Question

I have the following code in HTML (coded with Vue JS & Bootstrap):

<b-tabs card>
        <b-tab title="Followers" :title-link-class="'tab-title-class'">
              Page View graph here
        </b-tab>
        <b-tab title="Orders" :title-link-class="'tab-title-class'">
              Order Numbers graph here
        </b-tab>
        <b-tab title="Sales" :title-link-class="'tab-title-class'">
              <sales-analytics></sales-analytics>
        </b-tab>
        <b-tab title="Profit" :title-link-class="'tab-title-class'">
              Earning graph here
        </b-tab>
</b-tabs>

The card contains 4 tabs, one of which is titled "Sales", and <sales-analytics></sales-analytics> is a component I created to render a graph with Vue-ApexCharts library. However, the graph does not render automatically when the tab is selected. It can only run after I clicked F12 on Chrome, reloading the page does not work either.

I am thinking that the component should only run after the tab has been selected, rather than run altogether when the site is loaded (as this causes render problem when the tab is not selected when the site loads). Does anyone know how to implement this? Or an alternative way to solve this issue?

More stuff from the script section:

<script>
   import Sales from '../analytics/Sales'

export default {
    components: {      
        'sales-analytics': Sales
}
</script>

EDIT: After quite a bit of Googling, I found this: https://github.com/apertureless/vue-chartjs/issues/157 Which has a very similar behaviour to my situation, I want to v-if and mounted to load the component after the tab is selected. Anyone know how to do it?

Answer 1

Thank you all of the comments. And for any future references, I was able to resolve the issue by using v-if to check the current active tab, and then load the component under the scope.

<div v-if=“activeTab === ‘sale’>