title: Watch Vue 3 global variable for changes
body: <p>I set a provider in my <code>main.ts</code> file:</p>
  <p><code>app.provide('currentPage','test1')</code></p>
  <p>And then inject it in a component <code>Home.vue</code>:</p>
  <p><code>inject: ['currentPage'],</code></p>
  <p>I then can update it and show it in that component without a problem using <code>{{ currentPage }}</code>.</p>
  <p>But I want another component <code>DeepNestedComponent.vue</code> to be able to edit it, and <code>Home.vue</code> to be aware of the change.</p>
  <p>When I inject the same provider in <code>DeepNestedComponent.vue</code>, I can edit and display in the component, but <code>Home.vue</code> is not aware of the change and <code>{{ currentPage }}</code> still display 'test1'.</p>
  <p>How can I do that?</p>