title: How to watch a Vuex getter in Composition API (Vue 3)
body: <p>The state of my application seems to load AFTER my components get loaded, so my thought was to watch for the state-getter. But how do I watch a Vuex getter in the composition API?</p>
  <p>My state &amp; getter:</p>
  <pre><code>state: () =&gt; ({
      companies: [],
    }),
    getters: {
      getAvailableCompanies(state) {
        return state.companies
      }
    },
    [...]
  }
  </code></pre>
  <p>In my module, I import the store:</p>
  <pre><code>import { store } from '@/store/store.js'
  </code></pre>
  <p>And get the value of the getter in the setup() function of my component:</p>
  <pre><code>const companies = ref(store.getters[&quot;companies/getAvailableCompanies&quot;])
  console.log(&quot;companies&quot;, companies)
  </code></pre>
  <p>Now I am trying to watch for changes (also in setup()), once the state is populated:</p>
  <pre><code>watch(
    companies, (curr, old) =&gt; {
      console.log(curr, old)
    }
  )
  </code></pre>
  <p>Unfortunately, <code>companies.value</code> never changes and stays <code>undefined</code></p>