title: Access this.$root in Vue.js 3 setup()
body: <p>In Vue 2, you can access <code>this.$root</code> inside the <code>created</code> hook. In Vue 3, everything that would have gone inside the <code>created</code> hook now goes in <code>setup()</code>.</p>
  <p>In <code>setup()</code> we don't have access to <code>this</code>, so, how can we access anything on the root instance?</p>
  <p>Say, I set a property on the root instance:</p>
  <pre class="lang-js prettyprint-override"><code>const app = createApp(App).mount('#app');
  
  app.$appName = 'Vue3';
  </code></pre>
  <p>I can access <code>this</code> from <code>mounted()</code> with <code>this.$root.$appName</code>, how can I do this in <code>setup()</code>?</p>
  <hr />
  <p><strong>UPDATE</strong></p>
  <p>I can access it if I <code>import</code> it:</p>
  <pre class="lang-js prettyprint-override"><code>import app from '@/main';
  ...
  setup() {
      console.log(app.$appName) // Vue3
  </code></pre>
  <p>But, this is a hassle if I have to do this for every file.</p>
  <hr />
  <p><strong>UPDATE 2</strong></p>
  <p>Another workaround is to use <code>provide()</code> inside <code>App.vue</code> and then <code>inject()</code> in any other components:</p>
  <pre class="lang-js prettyprint-override"><code>setup() {
      provide('$appName', 'Vue3')
  </code></pre>
  <pre class="lang-js prettyprint-override"><code>setup() {
      inject('$appName') // Vue3
  </code></pre>