How data toggle target wait for axios success/fail in Vue?

I want to wait the axios success to trigger the modal, or fail to not trigger the modal without changing any existing styles. Current code is always trigger without waiting the axios response, even though v-if has been added.

Current code:

<template>
<div>
    <div class="col-12 text-center">
        <a @click="func()" class="btn btn-sm btn-round btn-success save-button" data-toggle="modal" data-target="#success-save">submit</a>
    </div>


    <div v-if="modalDisplay" class="modal modal-top fade" id="success-save" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-body">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h3 class="text-center" style="color:white;"><strong>Success</strong></h3>
                </div>
            </div>
        </div>
    </div>
</div>
</template>

<script>
export default {
    data() {
        return {
            modalDisplay: false,
        }
    },
    methods: {
        func() {
            axios.post('/some/uri', {
                'content': 'abc',
            })
                .then(response => {
                    this.modalDisplay = true;
                });
        },
    }
</script>

I have tried relocating v-if and others, but it still doesn't work, or it already works but the style has changed, your solution will be very helpful, thankyou!

Edit: I'm using Vue 2.6.11 Modified the code