Как отловить клик вне модального окна?

Есть такое приложение:

new Vue({
    el: '#app',
    data: {
      formIsActive: false
    },
    ..........
    watch: {
        formIsActive: function (val) {
            if (val) {
                document.addEventListener('click', event => {
                        function ()
                        if (!document.getElementById('modal-content').contains(event.target)) {
                            console.log('outside click');
                            this.formIsActive = false
                        }
                });
            }
        }
    }

По идее я хочу отловить нажатие вне элемента #modalcontent и как-бы работает, но до пояления модального окна. То-есть события такие:

1. клик по кнопке переход
2. переход formIsActive в состояние true
3. срабатывание вотчера
4. как следствие отлов события клика вне элемента и еще до появления модального окна переход formIsActive в false

Так вот вопрос - как отложить addEventListener до открытия модального окна?

fiddle: https://jsfiddle.net/feo2b93x/