By clicking on the user, show their data VUE.js

See if with this example you can solve your problem, modify your code a bit, add a new method called getInfo whereby you can assign a new property called selected which of the names of your first list you selected and in the middle column I show the information of that selected element.

CSS :

li.list-group-item.active > a { color: white; } 

HTML :

 <div id="app">
    <div class="container mt-5">
        <div class="row justify-content-center">
            <div class="col-4 text-center">


                <h1 v-if="txtBuscar===''">{{titulo}}</h1>
                <h1 v-else>Buscando...</h1>
                <ul class="list-group">
                    <li class="list-group-item bg-dark">
                        <input type="text" v-model="txtBuscar" placeholder="Busque un contacto...">
                    </li>
                    <template v-for="(item, index) in buscarNombre">
                     <li :class="'list-group-item ${selected && item.id === selected.id ? active: ''}'">
                        {{index + 1}}<a href="javascript: void(0);" @click="getInfo(index)"> {{item.name}}</a>
                    </li> 
                  </template>
                </ul>
            </div>

            <div class="class col-4 text-center">
                <h1>MÁS INFO</h1>
                <ul class="list-group">
                    <li class="list-group-item" v-for="(item, key) in selected">{{key}}: {{item}}</li>
                </ul>

            </div>

            <div class="class col-4 text-center">
                <h1>JSON</h1>
                <pre>
                {{$data}}
              </pre>
            </div>
        </div>
    </div>
</div>

JS:

const app = new Vue({
    el: '#app',
    data: {
        titulo: 'Agenda en VUE.js',
        txtBuscar: '',
        listaNombres: [],
        selected: null
    },
    methods: {
        //Trae los datos de la URL con AXIOS
        traerDatos: function () {
            var urlUsers = 'https://jsonplaceholder.typicode.com/users';
            axios.get(urlUsers).then(response => {
                //Almacena los datos que trae en ListaNombres.
                this.listaNombres = response.data
            });
        },
      getInfo: function(index){
        this.selected = this.listaNombres[index];
      }
    },
    //Trae los datos al iniciar...
    beforeMount(){
        this.traerDatos()
    },
    //Realiza el filtro al ingresar el nombre...
    computed: {
        buscarNombre: function () {
            return this.listaNombres.filter((item) => item.name.includes(this.txtBuscar));
        },
      active: function(){
        return "active";
      }
    }
})

Here I leave the fork ke I made of your project: link

EDIT: I'll explain to you by steps: the method getInfo receives the current index of the iteration of v-for and what it does is assign to selected the element of listaNombres with that same index, which means that when doing click on cualkiera, you will have in selected the data that was clicked, then the other thing that you did not understand is that at the time of establishing the class at li what I do is set by default ' list- group-item 'and in case the id of the current element of the iteration is the same as the one selected and there is a selected element, then add' active ', otherwise it will not I add nothing and it is unselected.