下面的代码可以正常工作，当使用ref时，我可以看到预期的输出，但是当使用reactive时，我在DOM中看不到任何更改。如果I console.logtransaction，则在两种情况下数据都在那里。一旦作为变量的transaction发生更改，更改是否应该在两种情况下都不反映在DOM上？
我还在努力理解Vue3的组合API以及何时使用reactive和reactive，我的理解是，当处理对象时，使用reactive，而对原语类型使用ref。

使用ref，它工作：

<template>
   {{ transaction }}
</template>

<script setup>
import { ref } from 'vue'

let transaction = ref({})

const getPayByLinkTransaction = () => {
   axios({
      method: "get",
      url: "pay-by-link",
      params: {
         merchantUuid: import.meta.env.VITE_MERCHANT_UUID,
         uuid: route.params.uuid,
      },
   })
      .then((res) => {
         transaction.value = res.data
      })
      .catch((e) => {
         console.log(e)
      })
}

getPayByLinkTransaction()
</script>

使用React式不起作用：

<template>
   {{ transaction }}
</template>

<script setup>
import { reactive } from 'vue'

let transaction = reactive({})

const getPayByLinkTransaction = () => {
   axios({
      method: "get",
      url: "pay-by-link",
      params: {
         merchantUuid: import.meta.env.VITE_MERCHANT_UUID,
         uuid: route.params.uuid,
      },
   })
      .then((res) => {
         transaction = { ...res.data }
      })
      .catch((e) => {
         console.log(e)
      })
}

getPayByLinkTransaction()
</script>