我正在使用 Vuejs.org 提供的可组合项，如下所示

// fetch.js
import { ref, isRef, unref, watchEffect } from 'vue'

export function useFetch(url) {
  const data = ref(null)
  const error = ref(null)

  function doFetch() {
    // reset state before fetching..
    data.value = null
    error.value = null
    // unref() unwraps potential refs
    fetch(unref(url))
      .then((res) => res.json())
      .then((json) => (data.value = json))
      .catch((err) => (error.value = err))
  }

  if (isRef(url)) {
    // setup reactive re-fetch if input URL is a ref
    watchEffect(doFetch)
  } else {
    // otherwise, just fetch once
    // and avoid the overhead of a watcher
    doFetch()
  }

  return { data, error }
}

并且在脚本标记内，我正在使用

let loopableValues = ref([])
const { data, error } = useFetch(
  'https://jsonplaceholder.typicode.com/todos/',
)
loopableValues.value = data
return { loopableValues }

我的问题是变量“数据”不是纯数组，我可以在模板中使用类似以下内容进行循环：

<div v-for="value in loopableValues" :key="value.id"> {{ value.id}}</div>

因为当我运行它时，我得到“未捕获（在承诺中）TypeError：值未定义”。所以我认为我需要以某种方式处理承诺，以便像上面一样循环出数据，但我陷入困境，不知道如何继续。我是否需要对从获取可组合项返回的数据使用函数，还是我遗漏了其他东西？