解决Vue中provide没有双向的绑定问题

问题描述：
子组件调用父组件的方法修改了父组件的某个值，将这个值通过provide传递给子组件，但是子组件拿到的这个值是未被修改的值，原来provide并不会在数据变化后将新的值传递
解决办法：
将想要传递的值外面再套一层，让它变成一个对象
父组件：

<template>
  <div>
    <Toolbar v-model="theme"></Toolbar>
    <button @click="changeTheme">切换{{ this.testA.theme }}</button>
  </div>
</template>

<script>
import Toolbar from './components/Toolbar.vue';

export default {
  name: 'App',
  data() {
    return {
      testA: {
        theme: 'white',  //如果没有外面的testA，直接传递theme，provide就不会把最新的值提供给想要inject的组件
      },
    };
  },
  methods: {
    changeTheme() {
      if (this.testA.theme === 'white') {
        this.testA.theme = 'dark';
      } else {
        this.testA.theme = 'white';
      }
    },
  },
  provide() {
    return {
      test1: this.testA,
      changeTheme: this.changeTheme,
    };
  },

  components: {
    Toolbar,
  },
};
</script>

子组件：

<template>
  <div :class="`button ${test1.theme}`">
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: "ThemeButton",
  inject:['test1','changeTheme']
};
</script>