How to set a property true by clicking on a button on carousel in Vuetify

I have a component for my Carousel:

<template>
   <div class="caro">
    <v-carousel >
     <v-carousel-item
      v-for="(item,i) in items"
      :key="i"
      :src="item.src"
     >
     <div class="title">
      <v-btn color="error" dark large></v-btn>
     </div>
    </v-carousel-item>
   </v-carousel>
   <p> Configure the rack in few easy steps. Click on the part you want. 
     to start from</p>
   </div>
</template>

    <script>
  export default {
    props:['showRackSec', 'showSubrackSec', 'showParts', 'showDatabase'],
    data () {
      return {
        items: [
          {
            id: 'rack', src: 'https://cdn.vuetifyjs.com/images/carousel/squirrel.jpg', title:'Rack Section'
          },
          {
            id: 'subrack', src: 'https://cdn.vuetifyjs.com/images/carousel/sky.jpg' , title: 'Subrack Section'
          },
          {
            id: 'parts', src: 'https://cdn.vuetifyjs.com/images/carousel/bird.jpg' , title: 'Parts Section'
          },
          {
            id: 'admin', src: 'https://cdn.vuetifyjs.com/images/carousel/bird.jpg' , title: 'Admin Section'
          }
        ]
      }
    }

I have another component (parent) that passes the props to Carousel.vue. All these props ('showRackSec', 'showSubrackSec', 'showParts', 'showDatabase') are initially false set by parent component.

I want to set them to true by clicking on the button on the carousel. For example when carousel is showing the "Subrack Section" and I click on the button it should set "showSubrackSec" to true.

What's the best way to do it?