当涉及到使用和更新React对象时，我似乎缺少了Vue组合API的一些东西。
请看下面的代码。当添加颜色时，我希望click事件更新模板中的{{colors}}输出。

<template>
  <div>
    <!-- {{colors}} Is not updated in the DOM on click event -->
    <pre>{{ colors }}</pre>
    <button @click="addColor">add color</button>
  </div>
</template>

<script>
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,
    };
  },
};
</script>

我可以在控制台日志中看到颜色的值正在更新，但在DOM中没有。
下面是一个代码沙箱
https://codesandbox.io/s/mystifying-roentgen-rox9k?file=/src/App.vue