How to make a tree-like menu, with checkboxes and displaying the corresponding cards?

Question

RESTful API

Good afternoon forum users! The following task arose: it is necessary to make a tree-like menu with a list of devices near which there are check-boxes. It is necessary after selecting the menu items "devices", when you press the "display" button, display the corresponding cards.
At the moment, what is available:
1) Displaying cards by loading information from the database via Rest request:

<div class="container  pa-0  grid-list-xl fluid" >
    <div class="layout wrap ">
      <div class="flex xs12 sm4 md3 d-flex" id="cards" v-for="currency in currencies" :key="currency.id">
              <card class="card" :id="currency.id" :name="currency.name" :location="currency.enterprise.location"  :napruga="currency.napruga"></card>
              </div>
    </div>
  </div>

data () {
      return {
        currencies: {}
      }
    }, 
    created() {
      axios({
        method: 'get',
        url: 'http://localhost:8080/app/rest/v2/entities/energyview_Device?view=device-with-enterprise',
        headers: {
            'Authorization': 'Bearer f4d1a543-7b5c-4d63-ab7c-48923c10ab2c',
            'Content-Type': 'application/x-www-form-urlencoded'
            
        },
  
      }).then(response => {
          this.currencies = response.data;
          console.log(this.currencies[0].body);          
        }).catch(error => {
          console.error(error.message);          
        });
    }
  }

2) Vuetify has an interesting component for implementing this kind of menu:
https://vuetifyjs.com/en/components/treeview
The last option
I'm trying to put it in my project, it's displayed incorrectly + the clicked items are not selected, rather the problem is in the fonts.
What is not clear: how to combine it all together, where to transfer the selected data to the menu in order to form the corresponding cards based on them in another component? Maybe someone already has ready-made examples of solving such problems?