How to call ajax only when displaying a part on a vue component?

Question

I have two components. I install and receive data through vuex store

My first component:

<template>
    <ul class="list-group">
        <li v-for="item in getOrderList" class="list-group-item">
            ....
                    <a href="javascript:"
                       class="toggle-show"
                       aria-expanded="false"
                       data-toggle="collapse"
                       :data-target="'#' + item.id"
                       @click="showDetailOrder(item.id)">
                        Show <span class="caret"></span>
                    </a>
            ...
            <div class="collapse" :id="item.id">
                <template v-if="getOrderDetail.id">
                    <order-collapse/>
                </template>
            </div>
        </li>
    </ul>
</template>
<script>
    import {mapGetters, mapActions} from 'vuex'
    import OrderCollapse from './OrderCollapse.vue'
    export default {
        name: 'order-list',
        components: {OrderCollapse},
        created() {
            // this is ajax to get order list. process ajax in the vuex store. this return data orders
            this.setOrderList()
        }
        methods: {
            ...mapActions(['setOrderList']),
            showDetailOrder(id) {
                // this is ajax to get order detail by id. process ajax in the vuex store. this return detail order by id
                this.setOrderDetail(id)
            }
        },
        computed: {
            ...mapGetters(['getOrderList'])
        },
    }
</script>

My second component:

<template>
    <table class="table table-bordered table-collapse">
        <tbody>
        <tr>
            <td>
                <span class="title">Address<br></span>
                <span class="title">{{getOrderDetail.buyer.name}}</span>
                <p>
                    {{getOrderDetail.buyer.address}}<br>
                    {{getOrderDetail.buyer.mobile_number}}<br>
                </p>
            </td>
        </tr>
        ...
        </tbody>
    </table>
</template>

<script>
    import {mapGetters} from 'vuex'
    export default {
        name: 'order-collapse',
        computed: {
            ...mapGetters(['getOrderDetail'])
        },
    }
</script>

Note:

setOrderList(): this will call ajax and save the response (list of order data): getOrderList setOrderDetail(): this will call ajax and save the response (order data by id): getOrderDetail

Each time you press the show button, it calls ajax

If you click on the show button, it will show a detailed order by id

if the click button reappears, it will hide the detailed order by id

I want to hide the detailed order, it does not call ajax

This way it only calls ajax if you want to show a detailed order

How can i do this?