从Firestore获取数据并在onclick事件上渲染vue组件

Question

在我的代码中，我在表行上附加了Vue onclick事件。当我单击该行时，我想从Firestore中获取数据，并将表行的ID作为文档ID。但是，当我单击该行时，我的代码从firestore中获取了数据并获取了数据，但是我的Vue实例未在HTML DOM上呈现它。

这是我的代码

let memberElements = document.querySelectorAll('.memberData');
memberElements.forEach(elem => {
    new Vue({
        el: elem,
        data: {
            members: [],
            memberBookTable: '',
            message: "",
        },
        mounted() {
            firebase.firestore().collection('users').onSnapshot(snapshot => {
                this.members = [];
                snapshot.forEach(doc => {
                    this.members.push(doc.data());
                })

            })
        },
        beforeMount() {
            this.memberBooks(1715004);
        },
        methods: {
            memberBooks(memberNo) {
                console.log("function called")
                this.message = "hello";
                firebase.firestore().collection('transactions').where("member.no", "==", memberNo).get()
                    .then(member => {
                        this.memberBookTable = ''
                        member.forEach(issue => {
                            var booksIds = Object.entries(issue.data().books);
                            var rawHTML = '';
                            booksIds.forEach(id => {
                                rawHTML = ` <tr id="${id[0]}">
                            <td v-if="id[1].isReturned">
                                <span class="bg-success text-white m-0 p-2 rounded-pill">Returned</span>
                            </td>
                            <td v-else>
                            <a href="#" class="btn btn-info btn-sm">Return</a>
                        </td>
                        <td>${id[1].no}</td>
                        <td>${id[1].name}</td>
                        <td>${issue.data().takenDate.toDate().toDateString()}</td>
                        <td>${issue.data().dueDate ? issue.data().dueDate.toDate().toDateString() : 'None'}</td>
                        <td>${issue.data().librarian}</td>
                        <td>${id[1].fine ? id[1].fine : 0}</td>
                        </tr> `;
                                this.memberBookTable += rawHTML;
                                console.log(this.memberBookTable)
                            })
                        })
                    }).catch(error => { console.log(error.message) })
            },
        }
    })
});

单击时，在控制台上，我得到“称为” 的函数和“” memberTableData ，即templateString。我也尝试过beforemount()，但不起作用。单击该行后如何在我的数据上呈现动态数据。预先感谢