vue3 composition API - watch - vuejs3

Question

I am trying to get to grips with the composition API. Struggling with watch:
const totalValuation = ref(0);
const values = ref([1, 2, 3]);
totalValuation.value = watch(finalTasksFiltered.value, () => {
return values.value.reduce((prev, curr) => {
console.log(prev + curr);
return prev + curr;
}, 0);
});
return {
finalTasksFiltered,
totalValuation,
};
The console.log works exactly like it should (1,3,6) but I cannot seem to render it to the DOM.
When I check to console it is fine but in the DOM like so {{ totalValuation }} it returns:
() => { (0,_vue_reactivity__WEBPACK_IMPORTED_MODULE_0__.stop)(runner); if (instance) { (0,_vue_shared__WEBPACK_IMPORTED_MODULE_1__.remove)(instance.effects, runner); } }
Oh, I am using Quasar - not sure if that makes a difference.
I am sure its something small.
I have imported ref and watch from vue.
I have a computed function working fine too.

Answer 1

watch is meant to execute a function when some value changes. It is not meant to be assigned as a ref. What you're looking to do seems like a better fit for computed
watch: (no assignment)
watch(finalTasksFiltered.value, () => {
totalValuation.value = values.value.reduce((prev, curr) => {
console.log(prev + curr);
return prev + curr;
}, 0);
});
computed: (uses assignment)
const totalValuation = computed(() => {
return values.value.reduce((prev, curr) => {
console.log(prev + curr);
return prev + curr;
}, 0);
});