i'm trying to use a computed function in Vuejs 3 externalized in a .js file using composition.
Here my .vue file, it's very simple : a count variable that is incremented to trigger the computed function.
<template>
<div>
{{ computedCount }}
</div>
</template>
<script setup>
import { ref } from 'vue'
import useComputedValue from './js/useComputed' // Import computed function
const count = ref(0) // Instanciate the count variable
count.value += 1 // Trigger the compute
const computedCount = useComputedValue(count)
console.debug(computedCount)
</script>
And here is my useComputed.js file :
import { computed } from 'vue'
export default function useComputedValue(count) {
const computedValue = computed(() => count.value * 5)
return {
computedValue,
}
}
The function simply mutliply the value given in parameter by 5. The problem is that the console.log(computedCount) gives a
{computedValue: ComputedRefImpl}
computedValue: ComputedRefImpl {dep: Set(1), _dirty: false, __v_isRef: true, effect: ReactiveEffect, _setter: ƒ, …}
[[Prototype]]: Object
And in the template, it displays { "computedValue": 5 } So, the function doesn't return the value of the multiplied by 5 parameter, but a wrapper object refImpl.
The exemple is adapted from the documentation : Composition doc
If I declare the computed function in the tag in the .vue file directly without importing it from another file, it works well as expected : the function returns the count value multiplied by 5.
Obviously, that is something I don't understand clearly...but what ?
I'm using 3.2 and the tag, so the return from setup() in the script tag in no longer needed : 3.2
Thank you in adavnce.