Javascript Vue对计算的道具更改没有反应

我正在我的一个组件中使用Vue composition API，在让组件显示计算属性更改的正确渲染值时遇到了一些问题。似乎如果我将道具直接输入到组件渲染中，它会按应该的方式反应，但当我将道具传递给计算属性时，它不会

我不知道这是为什么，因为我会期望它在计算属性中也是反应性的

这是我的密码：

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>

<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>

从“/components/Tester”导入测试仪；
导出默认值{
名称：“应用程序”，
组成部分：{
测试员，
},
数据（）{
返回{
测试编号：1，
};
},
安装的（）{
设置超时（（）=>{
这个.testNumber=2；
}, 2000);
},
};

测试仪.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>

<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>

下面是直接来自于props的数字：{{testNumber}


以下是经过计算（不更新）后的数字：
{{testNumberComputed}}

从“@vue/compositionapi”导入{computed}”；
导出默认值{
道具：{
测试编号：{
类型：数字，
要求：正确，
},
},
安装程序（{testNumber}）{
返回{
testNumberComputed:已计算（（）=>{
返回testNumber；
}),
};
},
};

下面是一个工作代码沙盒：

---

我知道我可以使用一个观察者，但我想避免，如果我可以的话，因为它更干净，我有它

不要破坏道具，以保持其反应性

设置（{testNumber}）

：