????【Vue.firebase】テーブル内のモーダルに各ユーザー情報を表示させたい

テーブル内の各行にあるモーダルボタンを押したら、ユーザー情報を取得したい

現在、Vue.FireStoreを利用し、仮想的な投げ銭アプリを制作しています。
その中で、モーダル機能をつけ、”Walletを見る”をクリックするとログインしていない各ユーザーの名前、残高を表示させたいです。

現在、モーダルを開くと、ログインしていないユーザー情報がすべて同じモーダルに表示されてしまいます。
クリックしたときに、そのユーザーと一致する情報を取得し、表示したいです。

Home.vueで

openModal (user,index){
      console.log(user)

でコンソールで確認すると、クリックしたユーザーの情報が取得できてはいるのですが、これをモーダルに反映させる方法が何度試行錯誤してもわかりません。

初学者なため、基礎的な質問かもしれませんが、ご教授いただけると幸いです。

該当のソースコード

Home.vue

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <button @click="signOut" class="signout">ログアウト</button>
    <p class="name">{{ userName }}さんようこそ！</p>
    <p class="wallet">残高：{{ $store.getters.myWallet }}</p>
    <h1>ユーザ一覧</h1>
    <table>
      <thead>
        <tr>
          <th>ユーザー</th>
        </tr>
      </thead>
      <tr v-for="(user,index) in userData" v-bind:key="index">
        <td>{{ user.name}}</td>
        <td><button class="button2" @click="openModal(user,index)">Walletを見る</button></td>
        <td><button class="button2" @click="openModal2(index)">送る</button></td>
      </tr>
    </table>
    <div>
        <transition>
          <Modal
           :val="usersIndex"
            v-show="showContent"
            @click="closeModal"
            @open="showContent = true"
            @close="showContent = false"
          ></Modal>
        </transition>
      </div>
    <div>
        <transition>
          <Modal2
           :val="usersIndex"
            v-show="showContent2"
            @click="closeModal2"
            @open="showContent2 = true"
            @close="showContent2 = false"
          ></Modal2>
        </transition>
      </div>
  </div>
</template>
<script>
import Modal from '../Modal.vue';
import Modal2 from '../Modal2.vue';
import firebase from "firebase";
export default {
  name: 'Home',
  components:{
    Modal,
    Modal2,
  },
  data() {
    return {
      userName: "",
      showContent: false,
      showContent2: false,
      usersIndex:'',
      userData: [],
    };
  },
  methods: {
    openModal (user,index){
      console.log(user)
      this.showContent = true
      this.usersIndex = index
      const usersIndex = this.usersIndex
      this.$store.dispatch('modalSet', usersIndex)
    },
    closeModal (){
      this.showContent = false
    },
    openModal2 (index){
      this.showContent2 = true
      this.usersIndex = index
      const usersIndex = this.usersIndex
      this.$store.dispatch('modalSet', usersIndex)
    },
    closeModal2 (){
      this.showContent2 = false
    },

    signOut() {
      firebase
        .auth()
        .signOut()
        .then(() => {
          this.$router.push("/signin");
        });
    },
  },
  computed: {
    name() {
      return this.$store.getters.name;
    },
    myWallet() {
      return this.$store.getters.myWallet;
    },
  },

  mounted() {
    firebase.auth().onAuthStateChanged((user) => {
      this.userName = user.displayName;
    });

    firebase.auth().onAuthStateChanged((user) => {
      if (user) {
        console.log("true");
      } else {
        location.href = "/signin";
      }

      const currentUser = firebase.auth().currentUser;
      this.uid = currentUser.uid;
      firebase
      .firestore()
      .collection("userData")
      .where(firebase.firestore.FieldPath.documentId(), "!=", currentUser.uid)
      .get()
      .then((querySnapshot) => {
        querySnapshot.forEach((doc) => {
          let data = {
            name: doc.data().name,
            myWallet: doc.data().myWallet,
          };
          this.userData.push(data);
        });
      });


    });
  },
};
</script>

Modal.vue

<template>
  <div class="overlay" v-show="showContent">
    <div class="main-content">
      <div  v-for="(user,index) in userData" v-bind:key="index">
      <p>{{ user.name }}さんの残高</p>
      <p>{{ user.myWallet}}</p>
      </div>
      <div id="button-content">
        <p>
          <button @click="closeModal" class="modal-button">close</button>
        </p>
      </div>
    </div>
  </div>
</template>



<script>
import firebase from "firebase";
export default {
  data() {
    return {
      showContent: false,
      userData:[],
    };
  },
  methods: {
    openModal() {
      this.$emit("open", this.showContent);
    },
    closeModal() {
      this.$emit("close", this.showContent);
    },
      returnUserData(id) {
      const userData = this.userData.find((user) => user.uid === id);
      return userData;
    },
  },

  mounted() {
    
    
    firebase.auth().onAuthStateChanged(() => {
      const currentUser = firebase.auth().currentUser;
      this.uid = currentUser.uid;
      firebase
      .firestore()
      .collection("userData")
      .where(firebase.firestore.FieldPath.documentId(), "!=", currentUser.uid)
      .get()
      .then((querySnapshot) => {
        querySnapshot.forEach((doc) => {
          let data = {
            name: doc.data().name,
            myWallet: doc.data().myWallet,
          };
          this.userData.push(data);
        });
      });
  
      
    });
  },
};
</script>

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import firebase from 'firebase'
import router from '@/router'


Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    user: {
      name: '',
      email: '',
      password: '',
      myWallet: '',
    },
    users: [],
    modalDatas: [],

  },
  getters: {
    email(state) {
      return state.user.email;
    },
    password(state) {
      return state.user.password;
    },
    name(state) {
      return state.user.name;
    },
    myWallet(state) {
      return state.user.myWallet;
    },
    users(state) {
      return state.users
    },
    modalDatas(state) {
      return state.modalDatas
    },
  },
  mutations: {
    setUser(state, payload) {
      state.user.email = payload.email
      state.user.password = payload.password
      state.user.name = payload.name
      state.user.myWallet = payload.myWallet

    },
    setUserData(state, doc) {
      state.user.name = doc.data().name
      state.user.myWallet = doc.data().myWallet
    },
    setUsersData(state, users) {
      state.users = users
    },
    setModalDatas(state, modalDatas) {
      state.modalDatas = modalDatas
    },
  },
  actions: {

    signUp(context, payload) {
      firebase.auth().createUserWithEmailAndPassword(payload.email, payload.password)
        .then(() => {
          const user = firebase.auth().currentUser
          user.updateProfile({
            displayName: payload.name,
          },
          )
            .then(() => {
              const db = firebase.firestore();
              db.collection("userData").doc(user.uid).set({
                uid: user.uid,
                email: payload.email,
                password: payload.password,
                name: payload.name,
                myWallet: payload.myWallet,
              })
            })
            .then(() => {
              context.commit('setUser', payload)
            })
            .then(() => {
              router.push('/home')
            })
        })
        .catch(function (error) {
          alert('入力に誤りがあります（' + error.message + '）');
        });
    },
    signIn(context, payload) {
      firebase.auth().signInWithEmailAndPassword(payload.email, payload.password)
        .then(() => {
          const user = firebase.auth().currentUser
          const docRef = firebase.firestore().collection("userData").doc(user.uid);
          docRef.get()
            .then((doc) => {
              if (doc.exists) {
                context.commit('setUserData', doc)
              } else {
                console.log();
              }
            })
            .then(() => {
              router.push('/home')
            })
            .catch(function (error) {
              alert('パスワードもしくはメールアドレスが異なります（' + error.message + '）');
            })
        })
    },
    modalSet (context, usersIndex) {
      const modalDatas = [];
      const user = firebase.auth().currentUser
      const db = firebase.firestore();
      db.collection("userData")
          .where(firebase.firestore.FieldPath.documentId(), "!=", user.uid)
          .get()
          .then((querySnapshot) => {
              querySnapshot.forEach((doc) => {
                  const modalData = {
                      uid: usersIndex,
                      name: doc.data().name,
                      myWallet: doc.data().myWallet
                  }
                  modalDatas.push(modalData)
                  context.commit('setModalDatas', modalDatas)
                  console.log(modalDatas)
              });
              });
  },
},
  modules: {
  }
})