Реактивный объект в Vue 3 Composition API не обновляется с помощью события @click

Мне кажется, что в Vue Composition API чего-то не хватает, когда дело доходит до использования и обновления реактивных объектов.

См. Код ниже. Я ожидаю, что событие щелчка обновит вывод {{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