Vue3父组件响应式变量传递到外部函数后，失去响应式问题

问题代码

描述：当父组件加载后，fooList初始是空数组，在发生change事件回调后，会进行赋值。按照设计预期，useFooData应该提供处理好的filteredFoo数据。可是实际上useFooData拿到的fooList一直是空数组，没有随着外部fooList的改变而改变。
父组件：

const fooList = ref<foo[]>([]);
// 模板中某控件的change事件回调
const onchange = () => {
qpWorksByTypeList.value = await getData();
}
const { filteredFoo } = useFooData(fooList);

组合式函数：

export function useFooData(fooList: MaybeRefOrGetter<foo[]>) {
	const data = toValue(fooList);
	const showFooList = computed(() => {
	// 此处过滤了data
	});
	
	return {
	showFooList
	}
}

原因

组合式函数useFooData中有一个致命错误：过早地解构了fooList。即const data = toValue(fooList);，toValue函数会返回fooList.value，这个数据是静态的数据，将其赋值给了data之后变成了fooList一个副本，computed中使用data作依赖，自然不会收到任何改变。

解决方案

一、将toValue解构移入computed

const showFooList = computed(() => {
	const data = toValue(fooList); // 将fooList纳入computed，使其能够正常更新
	// 此处过滤了data
	});

二、如果多处都有用到结果，可以考虑单独为其声明一个computed

const data = computed(() => toValue(fooList));
// 后续使用data作数据处理