The button doesn't switch with Vuex

[phuclh]

I have a button with initial value is true (Checked), then I switch it to false (Unchecked) and submit the form. After the form was submitted I set the button back to true by committing a Vuex mutation (called resetOrder). Even the value is true, but the button is still unchecked.

Here is my code:

<template>
    <div class="flex border-b border-40 remove-bottom-border">
        <div class="w-1/5 px-8 py-6">
            <label for="do_ship" class="inline-block text-80 pt-2 leading-tight">
                Giao hàng ngay
            </label>
        </div>
        <div class="py-6 px-8 w-1/2">
            <toggle-button id="do_ship" v-model="do_ship"
                           :labels="{checked: 'Yes', unchecked: 'No'}"
                           :width="60"
                           :height="26"/>
        </div>
    </div>
</template>

<script>
    import {ToggleButton} from 'vue-js-toggle-button'

    export default {
        name: "DoShip",

        computed: {
            do_ship: {
                get() {
                    console.log(this.$store.state.order.order.do_ship); // It shows the value is true, but the button is still unchecked.
                    return this.$store.state.order.order.do_ship;
                },
                set(value) {
                    this.$store.commit('order/setOrder', {
                        attribute: 'do_ship',
                        value: value
                    })
                }
            }
        },

        components: {
            ToggleButton
        }
    }
</script>

<style scoped>

</style>

My submit function:

createOrder(addAnother) {
    this.loading = true;
    this.errors = {};

    this.$store.dispatch('order/createOrder', this.order)
        .then(async response => {
            await this.$store.commit('order/resetOrder'); // Reset the button back to true

            this.$toasted.success('Success!');
            this.loading = false;

            if (addAnother === false) {
                let url = '/resources/orders/' + response.data.id;
                setTimeout(() => this.$router.push(url), 1200);
            }
        })
        .catch(err => {
            this.loading = false;
            this.parseErrors(err);
        });
}

My mutation

resetOrder(state) {
        state.order = {
            inventory_id: '',
            products: [],
            phone: '',
            first_name: '',
            last_name: '',
            address: '',
            province: '',
            district: '',
            commune: '',
            barter: false,
            cod_amount: 0,
            payment_method: 'Credit Card',
            note: '',
            order_value: 0,
            do_ship: true // Reset the button back to true
        };
    },

[phuclh]

Fix it by add sync attribute. Thank you