About the problem that the click event occurs in methods in vue to change the data in data

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
    <div class="navDiv">
        <ul>
            <li v-for="(fir_nav, fir_index) in fir_level_nav">
                <h3 v-on:click="show_sec_nav(fir_index)">{{ fir_nav }}</h3>
                <ul>
                    <li v-for="(sec_nav, sec_index) in sec_level_nav[fir_index]" v-show="sec_navShow[fir_index]">
                        <h4 v-on:click="show_thr_nav(fir_index*3+sec_index)">{{sec_nav}}</h4>
                        <ul>
                            <li v-for="(thr_nav, thr_index) in thr_level_nav[fir_index*3+sec_index]" v-show="thr_navShow[fir_index*3+sec_index]">
                                <h5>{{thr_nav}}</h5>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
        <p v-show="secHide">{{sec_navShow}}
        <p v-show="thrHide">{{thr_navShow}}
        <input type="text" v-model="sec_navShow[1]">
    </div>
<script type="text/javascript">
    var navData = [{
        1: [{
            1_1: ["1_1_1", "1_1_2", "1_1_3", "1_1_4"]
        },{
            1_2: ["1_2_1", "1_2_2", "1_2_3"]
        },{
            1_3: ["1_3_1", "1_3_2"]
        },]
    }, {
        2: [{
            2_1: ["2_1_1", "2_1_2"]
        },{
            2_2: ["2_2_1", "2_2_2"]
        },{
            2_3: ["2_3_1", "2_3_2", "2_3_3"]
        },]
    }, {
        3: [{
            3_1: ["3_1_1", "3_1_2", "3_1_3", "3_1_4"]
        },{
            3_2: ["3_2_1", "3_2_2"]
        },{
            3_3: ["3_3_1", "3_3_2", "3_3_3"]
        },]
    }, {
        4: [{
            4_1: ["4_1_1", "4_1_2", "4_1_3"]
        },{
            4_2: ["4_2_1", "4_2_2", "4_2_3", "4_2_4"]
        },{
            4_3: ["4_3_1", "4_3_2"]
        },]
    }];

    function getNavList(arr) {
        var nav = []
        for (var s = 0; s < arr.length; sPP) {
            for (var key in arr[s]) {
                if (arr[s].hasOwnProperty(key)) {
                    nav.push(key)
                }
            }
        }
        return nav
    }

    var navDiv = new Vue({
        el: ".navDiv",
        data: {
            navDataDemo: navData,
            sec_navList: [],
            thr_navList: [],
            sec_nav_show: [],
            thr_nav_show: [],
            secHide: true,
            thrHide: true
        },
        methods: {
            show_sec_nav: function (index) {
                for (var i = 0; i < this.sec_navShow.length; iPP) {
                    this.sec_navShow[i] = false
                }
                this.sec_navShow[index] = !this.sec_navShow[index]
                this.secHide = !this.secHide
            },
            show_thr_nav: function (index) {
                for (var i = 0; i < this.thr_navShow.length; iPP) {
                    this.thr_navShow[i] = false
                }
                this.thr_navShow[index] = !this.thr_navShow[index]
                this.thrHide = !this.thrHide
            }
        },
        computed: {
            fir_level_nav: function () {
                var nav = []
                for (var i = 0; i < this.navDataDemo.length; iPP) {
                    for (var key in this.navDataDemo[i]) {
                        if (this.navDataDemo[i].hasOwnProperty(key)) {
                            nav.push(key)
                        }
                    }
                    
                }
                return nav
            },
            sec_level_nav: function () {
                for (var i = 0; i < this.navDataDemo.length; iPP) {
                    var navName = getNavList(this.navDataDemo[i][this.fir_level_nav[i]])
                    this.sec_navList.push(navName)
                }
                return this.sec_navList
            },
            thr_level_nav: function () {
                for (var i = 0; i < this.navDataDemo.length; iPP) {
                    for (var s = 0; s < this.navDataDemo[i][this.fir_level_nav[i]].length; sPP) {
                        for (var key in this.navDataDemo[i][this.fir_level_nav[i]][s]) {
                            if (this.navDataDemo[i][this.fir_level_nav[i]][s].hasOwnProperty(key)) {
                                this.thr_navList.push(this.navDataDemo[i][this.fir_level_nav[i]][s][key])
                            }
                        }
                        
                    }
                }
                return this.thr_navList
            },
            sec_navShow: function () {
                for (var i = 0; i < this.sec_level_nav.length; iPP) {
                    this.sec_nav_show.push(false)
                }
                return this.sec_nav_show
            },
            thr_navShow: function () {
                for (var i = 0; i < this.thr_level_nav.length; iPP) {
                    this.thr_nav_show.push(false)
                }
                return this.thr_nav_show
            }
        }
    })
</script>
</body>
</html>

above is all the code, the code is to dynamically load all levels of menus in the data, first-level menu display, second-and third-level menu click display. What"s happening now is that the last two variables in data, secHide and thrHide, are added later. Because without these two variables and the operation on these two variables, the effect of the desired click menu to display the subordinate menu cannot be displayed.
what is confusing now is why not adding these two variables and the operation page for them will have no effect. Ask the great god for an answer.