vue3 provide的值 在回调函数中改变，inject 如何获取到最新的值？

需求：

父组件，通过 provide 传递了 视频方向的响应式值，该值会有一个初始化的默认值，并在获取视频方向的回调函数中，来动态改变

子组件，需要获取到父组件传递的视频方向，来执行一些逻辑。

这里我们在子组件中通过父组件传递响应式的变量，子组件接受后，通过 watch 监听该变量的改变，来动态执行逻辑。

代码如下：

// 父组件
import { ref, provide } from 'vue';

export default {
  setup() {
    const vDirection = ref(1);

    const getVideoDirection = (direction) => {
      vDirection.value = direction;
    };

    // Provide the reactive reference
    provide('vDirection', vDirection);

    return { getVideoDirection };
  },
};

// 子组件
import { inject, watch, onMounted } from 'vue';

export default {
  setup() {
    const vDirection = inject('vDirection');

    watch(vDirection, () => {
      initShowBar()
    })

    onMounted(() => {
      initShowBar()
    })
  },
};