title: Vue.js 3.0 - Update component UI when store property value changes via composition API
body: <p>I am writing a Vue.js app using Vue.js 3.0. I'm using this as a way to learn the composition API. One thing that is unclear to me is how to conditionally update my component UI when a store value is updated. To demonstrate my issue, I've created <a href="https://jsfiddle.net/6uhmn9rg/1/" rel="nofollow noreferrer">this fiddle</a>. The code is detailed here:</p>
  <p><strong>JavaScript</strong></p>
  <pre class="lang-js prettyprint-override"><code>const store = {
    state: reactive({
      result = null
    }),
    generateNewValue() {
      this.state.result = Math.floor(Math.random() * 10);
    }
  };
  
  const MyApp = {
    setup() {
      return {
      }
    }
  }
  const myApp = Vue.createApp(MyApp)
  
  myApp.component(&quot;banner&quot;, 
    { 
      template: '&lt;button @click=&quot;onGenerateClick&quot;&gt;generate&lt;/button&gt;',
      setup(props) {
        console.log('setting up...');
      },
      methods: {
        onGenerateClick() {
          store.generateNewValue();
        }
      }
    }
  );
  
  myApp.component(&quot;content&quot;, {
    template: '&lt;div&gt;&lt;span&gt;Content&lt;/span&gt;&lt;button @click=&quot;onGenerateClick&quot;&gt;generate&lt;/button&gt;&lt;/div&gt;',
    methods: {
      onGenerateClick() {
        store.generateNewValue();
      }
    }  
  });
  
  myApp.mount('#my-vue')
  </code></pre>
  <p><strong>HTML</strong></p>
  <pre class="lang-html prettyprint-override"><code>&lt;div id=&quot;my-vue&quot;&gt;
    &lt;banner&gt;&lt;/banner&gt;
    &lt;hr /&gt;
    &lt;content&gt;&lt;/content&gt;
  &lt;/div&gt;
  </code></pre>
  <p><strong>CSS</strong></p>
  <pre class="lang-css prettyprint-override"><code>.even-banner {
    background-color:navy;
    color: #fff;
  }
  
  .even-content {
    background-color:blue;
    color: #fff;
  }
  
  .odd-banner {
    background-color:maroon;
    color:#fff;
  }
  
  .odd-content {
    background-color:red;
    color:#fff;
  }
  </code></pre>
  <p>When I click the &quot;generate&quot; button, a random number is generated. If that number is even, I want to set the <code>content</code> div to use the <code>even</code> CSS class. If it is an odd number, I want to apply the <code>odd</code> CSS class. I'm somewhat stuck though.</p>
  <p>My problem is, I can successfully set the state value in the global store. However, I do not know how to react to property value changes in the components. I added a <code>watchEffect</code>, in my <code>setup</code> functions. However, that does not give me access to the state of the individual component itself. I'm trying to figure out a way in each component to say &quot;hey, when this property in the store changes, update the UI like this.&quot;.</p>
  <p>What am I missing?</p>