Vue не реагирует на изменение вычисленных свойств

Я использую API композиции Vue в одном из моих компонентов, и у меня возникли проблемы с получением компонента, отображающего правильное отображаемое значение из вычисленного изменения свойства. Кажется, что если я загружаю опору непосредственно в компоненты, он реагирует так, как должен, но когда я передаю его через вычисляемое свойство, это не так.

Я не уверен, почему это так, как я ожидал, он будет реактивным и в вычисляемом свойстве?

Вот мой код:

App.vue

<template>
  <div id="app">
    <Tester :testNumber="testNumber" />
  </div>
</template>

<script>
import Tester from "./components/Tester";

export default {
  name: "App",
  components: {
    Tester,
  },
  data() {
    return {
      testNumber: 1,
    };
  },
  mounted() {
    setTimeout(() => {
      this.testNumber = 2;
    }, 2000);
  },
};
</script>

Tester.vue

<template>
  <div>
    <p>Here is the number straight from the props: {{ testNumber }}</p>
    <p>
      Here is the number when it goes through computed (does not update):
      {{ testNumberComputed }}
    </p>
  </div>
</template>

<script>
import { computed } from "@vue/composition-api";

export default {
  props: {
    testNumber: {
      type: Number,
      required: true,
    },
  },
  setup({ testNumber }) {
    return {
      testNumberComputed: computed(() => {
        return testNumber;
      }),
    };
  },
};
</script>

Вот рабочий код и ящик:

https://codesandbox.io/s/vue-composition-api-example-forked-l4xpo?file=/src/components/Tester.vue.

Я знаю, что могу использовать наблюдателя, но я бы хотел избежать этого, если смогу, так как он чище, чем я сейчас пользуюсь.