Как на vue.js сделать проще выдвигающееся/выпадающее меню?

Question

[Nik_Set_7]

Сделал работающее выдвигающееся сбоку меню, но мне кажется, что оно получилось несколько сложным в плане работы. Хотелось узнать, есть ли более простая реализация (именно с нуля, не используя плагинов типа https://slideout.js.org, т.к. с ними ещё больше мороки)

Этапы работы указаны в комментариях, что за чем идёт. По сути мне нужно добавить или убрать класс у меню в зависимости от статуса переменной (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>

Comments

[Сергей delphinpro]

Нафига столько сложностей? O_o

export default {
    data(){
        return {
          active: false
        }
    }
    methods: {
        click () {
            this.active = !this.active;
        },
    }
}

[Nik_Set_7]

Сергей delphinpro, Чуть позже попробую, чувствую, что перемудрил