[Vuejs]-Use modal on a v-for element?

First, pull out the modal inside of v-for, then create a method to get your user index, and add it to the Modify button. this is how you can get the data a user without sending another HTTP Request. and then you can show this.user data in your modal as you want.

<div
 v-for="(user, index) in filterUser"
 v-bind:key="user"
 class="form-control"
>

 <p>
  <b>{{ user.fname }} </b> {{ user.lname }}
 </p>

 <b-button
  v-b-modal.modal-1
  @click="getUserInfo(index)"
 >
  Modifiy
 </b-button>
</div>

data() {
 return {
  search: "",
  users: [],
  user: {}
 };
},

methods: {
 getUserInfo(index) {
  this.user = this.users[index]
 }
}