How to make slide-out/drop-down menu easier in vue.js?

Question

Vue.js

I made a working side-sliding menu, but it seems to me that it turned out to be somewhat complicated in terms of work. I wanted to know if there is a simpler implementation (just from scratch, without using plugins like https://slideout.js.org, because there is even more trouble with them)
The stages of work are indicated in the comments, what follows. In fact, I need to add or remove a class from the menu, depending on the status of the variable (true or false)

<template>
    <div>
        <div class="nav-news__menu" v-bind:class="{ 'is-active' : active }">
            <div class="nav-news__heading">Новости</div>
            <div class="nav-news__block-news">
                <div class="nav-news__block">тест</div>
                <div class="nav-news__block">тест</div>
                <div class="nav-news__block">тест</div>
                <div class="nav-news__block">тест</div>
                <div class="nav-news__block">тест</div>
                <div class="nav-news__block">тест</div>
                <div class="nav-news__block">тест</div>
                <div class="nav-news__block">тест</div>
                <div class="nav-news__block">тест</div>
                <div class="nav-news__block">тест</div>
                <div class="nav-news__block">тест</div>
                <div class="nav-news__block">тест</div>
                <div class="nav-news__block">тест</div>
                <div class="nav-news__block">тест</div>
                <div class="nav-news__block">тест</div>
                <div class="nav-news__block">тест</div>
                <div class="nav-news__block">тест</div>
                <div class="nav-news__block">тест</div>
                <div class="nav-news__block">тест</div>
                <div class="nav-news__block">тест</div>
            </div>
        </div>

        <div class="nav-news__all-news" v-on:click="click">Новости</div>
    </div>
</template>

<script>
    export default {
        mounted () {
                // 2. Возвращается this.active
            this.active = false;
        },
        methods: {
            click () {
                    // 6. При нажатии на кнопку меняется значение this.active
                    // 7. Срабатывает watch
                    // 8. Вызывается activeAsync
                    // 9. Срабатывает active в asyncComputed, возвращающий новое значение
                (this.active) ? (this.active = false) : (this.active = true);
            },
            activeAsync() {
                    // 4. Возвращается новое значение
                return this.active;
            }
        },
        asyncComputed: {
            active () {
                    // 1. Возвращается undefined, т.к. на текущий момент не существует статуса active
                return this.active;
            }
        },
        watch: {
            active: function(newActive) {
                    // 3. Вызывается метод обновления значения
                this.activeAsync();
                    // 5. Статус обновлён
            }
        }
    }
</script>