我有一个 Vue 组件，我在同一页面上重用了它。我在组件中使用了 bootstrap 4 模态。我的问题是当我在引导模式中更新组件数据时，当我在视图页面中重用相同的组件时，数据绑定无法正常工作。

这是我的组件：

<template>
  <div class="container-fluid" id="pageContent">
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#test">
      Launch demo modal
    </button>

    <!-- Modal -->
    <div class="modal fade" id="test" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
          </div>
          <div class="modal-footer">
            <button @click="filterHistory">Add</button>
            <button @click="closeFilter">Remove</button>
          </div>
        </div>
      </div>
    </div>
    <!-- Headline -->
    <h1>{{filter}}</h1>
  </div>
</template>
<script>

export default {
  name: "Table",data() {
    return {
      filter: false
    }
  },methods: {
    filterHistory() {
      this.filter = true
    },closeFilter() {
      this.filter = false
    },}
}
</script>

这里我在视图页面中重复使用它：

<template>
  <div id="userInfo" v-bind:class="myval.theme">
     <Test></Test>
     <Test></Test>
  </div>
</template>

filter 的值是一个布尔表达式，只在最先声明的组件中更新。所以数据绑定失败......有没有人遇到过这个？或者知道如何解决？