How to alter data when computed property changes?

In my vue.js template I have a navigation 'pop-up/modal' component that is toggled on the users click. The default position of this navigation bar is closed, however, when a certain computed property (in this case, once some questions are answered) evaluates to true I want the default position of the bar to be 'popped-up' without losing the toggle-ability of the modal component.

I have tried directly changing the data in the computed property but have since learned (from looking around on SO) that this is bad practice. After some research it appeared that setting up a watcher which calls a method when the computed property allAnswered returns true was the way to go but I cannot get this to work at all.

It's part of a much larger template so I'm attaching the relevant parts of the code below:

<template>
    <div class="m-btn__nav" @click="showNav = true"><h4>Where to?</h4></div>
    <Navigation v-if="showNav" @close="showNav = false"></Navigation>
</template>
<script>
export default {
    data () {
        return {
            showNav: false
        }
    },
    computed: {
        allAnswered () {
            let q = this.getRoomQuestions(1)
            let a = []
            for (let index = 0; index < q.length; ++index) {
                a.push(q[index].answered)
            }
            if (Object.keys(a).every(i => a[i])) {
                return true
            } else {
                return false
            }
        }
    },
    watch: {
        allAnswered: function (n) {
            this.updateNav()
        }
    },
    methods: {
        updateNav: function () {
          this.showNav = true
        }
    }
}
</script>

I expected the watcher allAnswered to fire when the computed property allAnswered changed from returning false to true and fire the method updateNav to change the showNav data. The result is that even when the allAnswered computed property re-evaluates, it does not fire the watcher/method and change the data.