在 vue 中使用返回的 refs 对象更新 ref 值的正确方法是什么

Question

我正在使用 nuxt3 useAsyncData 可组合项，它返回一个 refs 对象：{data, pending, error}。

我需要在组件安装时提供一些现有的引用，因为这些数据是在某些用户操作后获取的，并且需要在安装时的模板中可用。

是否有更好的方法用 getSearchResults 函数返回的 refs 更新现有的 refs（hasError、isLoading、searchItems）？

在第二个示例中，我在解构时更新了引用，但我似乎以这种方式失去了反应性。

我现在是怎么做的：

const hasError = ref(false);
const isLoading = ref(false);
const searchQuery = ref('');
const searchItems = ref([]);

watch(searchQuery, async () => {
  // Fetch data
  const { data, pending, error } = await getSearchResults(searchQuery.value);
  
  // Update Refs
  isLoading.value = pending.value;
  hasError.value = error.value;
  searchItems.value = data.value;
});

const getSearchResults = async (query) => {
  if (!query) return;
  return await useAsyncData('searchItems', () =>
    $fetch('/api/search', {
      params: {
        query: query,
      },
    })
  );
};

解构时设置值 - 不起作用：

const hasError = ref(false);
const isLoading = ref(false);
const searchQuery = ref('');
const searchItems = ref([]);

watch(searchQuery, async () => {
  ({ data: searchItems.value, pending: isLoading.value, error: hasError.value } = await getSearchResults(searchQuery.value));

});

const getSearchResults = async (query) => {
  if (!query) return;
  return await useAsyncData('searchItems', () =>
    $fetch('/api/search', {
      params: {
        query: query,
      },
    })
  );
};