Conditional Rendering in VueJS

I am trying to understand what I'm doing wrong in here.

<div class="pageContent container-fluid" **v-show="isHidden"**>
            <div class="innerPageContent container-fluid">
                <div>
                    <h2>About</h2>
                </div>

                <div class="container">
                    <v-row dense>
                        <v-col v-for="card in cards" :key="card.title" :cols="card.flex">
                            <v-card dark outlined>
                                <v-img :src="card.src" class="white--text align-end" height="200px">
                                    <v-card-title v-text="card.title"></v-card-title>
                                </v-img>
                                <v-card-actions>
                                    <v-spacer></v-spacer>
                                    <v-btn text color="orange" :to="card.route" **@click="isHidden = !isHidden"**>EXPLORE</v-btn>
                                </v-card-actions>
                            </v-card>
                        </v-col>
                    </v-row>
                </div>
            </div>
        </div>

data () {
    return {
        cards: [
            { title: 'Test', src: '', flex: 6, route: '/about/test' },
            { title: 'Test2', src: '', flex: 6, route: '/about/test2' },
        ],
        **isHidden: true,**
    }
},

The "About" div is hidden and, upon clicking on "Explore" button, I see "test2" (my second route), but when I go back, the "About" div is no longer displayed. Is there something I'm missing ?