title: Reactive object in Vue 3 Composition API not updating with a @click event
body: <p>I seem to be missing something with the Vue Composition API when it comes to using and updating reactive objects.</p>
  <p>See the below code. I'm expecting the click event to update the <code>{{colors}}</code> output in the template when a color is added.</p>
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;!-- {{colors}} Is not updated in the DOM on click event --&gt;
      &lt;pre&gt;{{ colors }}&lt;/pre&gt;
      &lt;button @click=&quot;addColor&quot;&gt;add color&lt;/button&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import { reactive } from 'vue';
  
  export default {
    setup() {
      let colors = reactive({ green: '#ccc000' });
  
      function addColor() {
        // By cloning and creating a new merged object
        colors = Object.assign({}, colors, { red: '#fff000' });
        // Or by changing the object directly
        colors.orange = '#322332'; // Also does not work
        console.log(colors); // Logs out the correct value
      }
  
      return {
        colors,
        addColor,
      };
    },
  };
  &lt;/script&gt;
  </code></pre>
  <p>I can see in the console log the value of colors is being updated but not in the DOM.</p>
  <p>Here is a code sandbox of the code</p>
  <p><a href="https://codesandbox.io/s/mystifying-roentgen-rox9k?file=/src/App.vue" rel="nofollow noreferrer">https://codesandbox.io/s/mystifying-roentgen-rox9k?file=/src/App.vue</a></p>