title: Accessing computed properties of app root from child component in Vue 3
body: <p>I am trying to access a computed property of my app root in one of my child components, but I can't seem to find any way to. My app is set up like so:</p>
  <p>App.vue</p>
  <pre><code>&lt;script setup&gt;
    import { ref, onUnmounted, computed } from 'vue'
    import Board from './components/Board.vue'
    ...
    const guessNotInDictionary = computed(() =&gt; { ... } )
    ...
  &lt;/script&gt;
  </code></pre>
  <p>Board.vue</p>
  <pre><code>&lt;script setup&gt;
    import Row from './Row.vue'
    ...
  &lt;/script&gt;
  </code></pre>
  <p>Row.vue</p>
  <pre><code>&lt;script setup&gt;
    import Tile from './Tile.vue'
    ...
  &lt;/script&gt;    
  </code></pre>
  <p>Tile.vue</p>
  <pre><code>&lt;script setup&gt;
    import { ref, getCurrentInstance } from 'vue'
    const app = getCurrentInstance()
    ...
  &lt;/script&gt;
  </code></pre>
  <p>The computed property <code>guessNotInDictionary</code> is properly defined, because when I display its value in App.vue's template, I get correct values that update properly. But when I access <code>app.root.guessNotInDictionary</code> from Tile.vue, I get <code>undefined</code>. <code>app.root</code> does return the root instance, as I have logged it in the console, but there is not a <code>computed</code> property on that object, like there is for <code>data</code> or <code>props</code>.</p>
  <p>Suggestions?</p>
  <p>EDIT:
  I have tried passing props down the chain of children, but I seem to be losing the reactive state. When the computed property changes values, none of the children's values are updated.</p>
  <p>EDIT 2:
  Nvm. It was a small typo that was preventing the prop from being passed properly. It is all working now. Thanks!</p>