vuejs post checkbox empty data or full data

I am trying to make a checkbox with vue js, so that the method is not written. I want the checkbox to be false in the first place, the next step is that when the checkbox is posted, I want "opening_balance" to be sent as an empty array. or vice versa, if the checkbox is checked, I want it to appear in "opening_balance" when the data is posted.

For example: POST No Checkbox

opening_balance: {}

POST Checked

opening_balance: {date: "2021-08-30", net_total: "1000.00", currency: "USD"}

new Vue({
    el: '#app',
    data() {
        return {
            attributes: {
                opening_balance: {
                    net_total: 0,
                    date: new Date(),
                    currency: USD,
                },
            }
        }
    }
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.14/vue.js"></script>

<div id="app" style="padding: 1rem;">
<div class="d-flex">
    <input class="form-check-input" type="checkbox" value="false" @click="attributes.opening_balance" v-model="attributes.opening_balance">
    <label class="form-check-label"><b> opening balance</b></label>
</div>
<div v-if="attributes.opening_balance">
    <input type="text" id="Detaylari" class="form-control" v-model="attributes.opening_balance.date">
    <input type="text" class="form-control" v-model="attributes.opening_balance.net_total">
    <input type="text" class="form-control" v-model="attributes.opening_balance.currency">
</div>
</div>