Change props value in vuejs2

I am new in vuejs2 development. I am working in a modal development. I kept the modal body code in a component and displaying that modal in another component. I have below code in modal body component.

<script>  
import SemanticModal from 'vue-ya-semantic-modal'

export default {        
    components: { SemanticModal: SemanticModal() },
    name: 'ModalBody',
    props: ['active1',],
    data() {
        return  {
            visible: false
        }
    },
    methods: {
        close() {
            this.$emit('sendValue', false);
            this.visible = false
        },
        open () {
            this.visible = true
        },
    },
    watch: {
        active1 () {
            if (this.active1 && !this.visible) this.open()
            else if (!this.active1 && this.visible) this.close()
        },
    },
    directives: {
        'click-outside': {
            bind: function(el, binding, vNode) {
                el.onclick = function(e) {
                    var modal = document.getElementsByClassName("modal");
                    el.addEventListener('click', function (event) {
                        if (!modal[0].contains(event.target)) {                               
                           vNode.context.$emit('sendValue', false);
                           this.visible = false
                        } 
                    })            
               }
            }    
        }
    }
}

I am calling that model (child) component in parent component like below

<modal-body :active1="active1" @sendValue="active1 = $event"></modal-body>

I need to change the below props active1 value to false from child to parent component.