How can I close modal after click save button in vue component?

My vue component like this :

<template>
    <div ref="modal" class="modal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <form>
                    ...
                    <div class="modal-footer">
                        ...
                        <button type="button" class="btn btn-success" @click="addPhoto">
                            Save
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        ...
        methods: {
            addPhoto() {
                const data = { id_product: this.idProduct };
                this.$store.dispatch('addImageProduct', data)
                    .then((response) => {
                        this.$parent.$options.methods.createImage(response)
                    });
            },
        } 
    }
</script>

If I click button addPhoto, it will call addPhoto method.

addPhoto method used to call ajax. After response of ajax, it will pass the response to createImage method in parent component

After run it, the modal not close. Should the modal close after click save button

How can I close the modal after call createImage method?