Collapsible json in card //dashboard2


can somebody help me how to create collapsible json (just like in editor debug section) under vuetify card?

  <v-card class="mx-auto" max-width="344">
    <v-card-title>JSON </v-card-title>

    <v-card-subtitle> Data inside </v-card-subtitle>

      <v-btn color="orange-lighten-2" text="Explore"></v-btn>


        :icon="show ? 'mdi-chevron-up' : 'mdi-chevron-down'"
        @click="show = !show"

      <div v-show="show">

                "Name": "TiStRcv",
                "SymbolicDataBlockAddress": "MDA.TiStRcv",
                "DisplayName": "module data interface",
                "Type": "DATETIME",
                "Description": "time stamp \"data recieved\"",
                "AddressOffset": 16,
                "SpotKey": "536d9a7d-f965-ed55-3e6b-512533c473e5",
                "ModuleDB": {
                    "Name": "SCADA"
                "Name": "TiStSnd",
                "SymbolicDataBlockAddress": "MDA.TiStSnd",
                "DisplayName": "module data interface",
                "Type": "DATETIME",
                "Description": "time stamp \"data sent\"",
                "AddressOffset": 24,
                "SpotKey": "9d350d80-1305-e0bf-50b1-309f0318771d",
                "ModuleDB": {
                    "Name": "SCADA"
 }}</pre >

  export default {
    data: () => ({
      show: false,
just formats JSON, but some might become very big so I would like to be able to make them collapsable:

something like this: jsonview demo GitHub - pgrabovets/json-view: This is a javascript library for displaying json data into a DOM.

I couldn't merge them together