我试图理解Vue3中的合成APIReact性。我想建立一个搜索栏，它将立即显示模板中的结果。
为此，我有一个React变量搜索和一个React变量结果。
如果我声明results为ref（），它应该自动转换为reactive（）due，因为它是一个Array [示例A]，或者直接声明这个数组为reactive（）[示例B]，结果不会直接呈现在模板中。我写了一个字母，什么也没发生，但当我写第二个字母时，我看到了之前用单个字母搜索的结果。
当我把结果嵌套得很深时[例C]，它就起作用了，我立即看到了所有结果。
为什么？我不明白为什么A或B不起作用。

<script setup>
let search = ref("");

// EXAMPLE A
// This does not work, the search results are shown one "tick" later
const results = ref([]);

// EXAMPLE B
// This does not work, the search results are shown one "tick" later
const results = reactive([]);

// EXAMPLE C
// This does work, when the result array is deeply-nested in a reactive object
const query = reactive({ results: [] });

watch(search, (value) => {
    axios
        .post("/search", { search: value })
        .then(response => {
            // EXAMPLE A / B
            results = response.data;
            
            // EXAMPLE C
            query.results = response.data;
        })
        .catch();
});
</script>

<template>
    <!-- EXAMPLE A / B -->
    <div v-for="product in results" :key="product.id">
        <div>{{ product.id }}</div>
        <div>{{ product.name }}</div>
    </div>
    
    <!-- EXAMPLE C -->
    <div v-for="product in query.results" :key="product.id">
        <div>{{ product.id }}</div>
        <div>{{ product.name }}</div>
    </div>
</template>