I'm having difficulties with a VueJS project of mine.

I'm trying to get a click event to show additional user data from a JSON API.

The console recognizes the click event, but for some odd reason, none of the additional data that I'm trying to toggle, appears.

I'm suspecting that the method is at fault, or maybe perhaps that the click event isn't configured properly, because the data is there, but nothing shows -- no errors in the console either.

Any suggestions would be greatly appreciated!

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
    <section class="middleSection">
    <div class="container">
    <div class="row">
      <div class="col-12">
            <table class="table table-dark">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>User name</th>
                        <th>Email</th>
                    </tr>
                </thead>
                <tbody v-for="(user, index) in users" :key="index">
                  <tr data-toggle="collapse" @click="showInfo(userInfo)">
                    <td>{{ user.name }}</td>
                    <td>{{ user.username }}</td>
                    <td>{{ user.email }}</td>
                  </tr>
                </tbody>
            </table>

            <div v-if="userInfo" class="card card-body">
              <div>{{ userInfo.name }}</div>
              <div>{{ userInfo.username }}</div>
              <div>{{ userInfo.adress.street }}</div>
              <div>{{ userInfo.address.suite }}</div>
              <div>{{ userInfo.address.city }}</div>
              <div>{{ userInfo.address.zipcode }}</div>
            </div>

        </div>
        </div>
        </div>
    </section>
</template>

<script>

export default {
  name: "middleSection",
  data() {
    return {
      users: [],
      userInfo: null
    }
  },

  methods: {
    showInfo(userId) {

      for (const user of this.users) {

        if (user.id == userId) {

          this.userInfo = user
          console.log(this.userInfo)
        }
      }
    }
  },

  created() {
    // Fetch JSON data
              fetch('https://jsonplaceholder.typicode.com/users/')
                  .then(response => response.json())
                    .then(json => {
                    this.users = json
                  }) 
  }
}

</script>

<style>

.col-12 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
  .middleSection {
    height: 87vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 5vh !important;
  }
</style>
```