toogling many items

Hello, 

i have a problem with how to handle many toogles and active classes.

I have a component with 3 sub-components: root has 5 buttons, if i click one, i open a second component with many buttons, if i click on one of those, i get again many buttons. The last component is my panel-component with again buttons and those buttons toogle tables. If i change the output with an click on another "root-button", i have to toogle off all toogles of the child-components, so i only have the root and the first component visible. And i have to toogle of the active states of my buttons too.

Is there a better way, because the toogles make my code pretty damn messy.

<template>
    <div v-if="loaded" class="m-3"> 
            <nav class="nav rounded nav-pills navbar-dark justify-content-around">
                <div @click="onClick(1)" class="btn text-white w-20 m-2" :class="toogleClass(1)" >VDNs</div>
                <div @click="onClick(2)" class="btn text-white w-20 m-2" :class="toogleClass(2)" >Ansagen</div>
                <div @click="onClick(3)" class="btn text-white w-20 m-2" :class="toogleClass(3)" >Skills</div>
                <div @click="onClick(4)" class="btn text-white w-20 m-2" :class="toogleClass(4)" >Feiertagstabellen</div>
            </nav>
            <div class="row">
            <div class="text-left w-50" >
                
                <datatable :data="vdns" :columns="columnsExtens" v-if="toogled==1"></datatable>
                <datatable :data="announcements" :columns="columnsExtens" v-if="toogled==2"></datatable>
                <skilltable 
                v-on:eventAgents="showAgents" 
                ref="skilltable"
                :data="skills" 
                :columns="columnsID" 
                v-if="toogled==3"
                ></skilltable>
                <datatable :data="holidays" :columns="columnsID" v-if="toogled==4"></datatable>
                
            </div>
            <div class="text-left w-50" >
                <datatable :data="agents" :columns="columnsExtens" v-if="agentsShow == true && toogled==3"></datatable>
            </div>
        </div>

        </div>
</template>

<script>

import datatable from './data-table.vue'
import skilltable from './data-skill-table.vue'

export default {
    props: ['data'],
    components: {
    datatable,skilltable
    },                      
    data: function () {
        return {
            loaded: false,
            toogled: false,
            agents: [],
            agentsShow: false,
            selected: [],
            vdns: [],
            announcements: [],
            skills: [],
            selectedSkill: [],
            holidays: [],
            columnsID: [
                {
                    heading: 'Nummer',  
                    value: data => data.id
                },
                {
                    heading: 'Name',
                    value: data => data.name
                }
            ],
            columnsExtens: [
                {
                    heading: 'Nummer',  
                    value: data => data.extension
                },
                {
                    heading: 'Name',
                    value: data => data.name
                }
            ]
        }
    },

    methods: {
        onClick(val){
            this.toogled = val
            if(this.agentsShow == true && this.toogled != 3){
                this.agentsShow = false
            }
        },
        showAgents: function (skill) {
            this.agents = skill.agent
            if(this.$refs.skilltable.toogled == skill)
            {
            this.$refs.skilltable.toogled = [],
            this.agentsShow = false
            }
            else{
            this.$refs.skilltable.toogled = skill,
            this.agentsShow = true
            }               
        },
        toogleClass(val) {
            return {
                'bg-dark':this.toogled != val,
                'bg-primary': this.toogled == val
            }
        }
    },

    watch: {
        data: function(){
            this.vdns = this.data.vdns
            this.announcements = this.data.announcements
            this.skills = this.data.skills
            this.holidays = this.data.holidays
        }
    }

}

</script>

------ this was my last component.

this is the watch from my root component:

watch: {
    project: function(){
        this.$refs.hotlines.selected = []
        this.$refs.panel.toogled = 0
        this.$refs.panel.announcements = []
        this.$refs.panel.loaded = false
        this.$refs.panel.vdns = []
        this.$refs.panel.skills = []
        this.$refs.panel.holidays = []
        this.$refs.panel.agents = []
        this.$refs.panel.agentsShow = false
    }
}