Estoy tratando de usar una función calculada en Vuejs 3 externalizada en un archivo .js usando composición.

Aquí mi archivo .vue, es muy simple: una variable de conteo que se incrementa para activar la función calculada.

 <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>

Y aquí está mi archivo useComputed.js:

 import { computed } from 'vue' export default function useComputedValue(count) { const computedValue = computed(() => count.value * 5) return { computedValue, } }

La función simplemente multiplica el valor dado en el parámetro por 5. El problema es que console.log(computedCount) da un

 {computedValue: ComputedRefImpl} computedValue: ComputedRefImpl {dep: Set(1), _dirty: false, __v_isRef: true, effect: ReactiveEffect, _setter: ƒ, …} [[Prototype]]: Object

Y en la plantilla, muestra { "computedValue": 5 } Entonces, la función no devuelve el valor del parámetro multiplicado por 5, sino un objeto contenedor refImpl.

El ejemplo está adaptado de la documentación: Composición doc

Si declaro la función calculada en la etiqueta del archivo .vue directamente sin importarla de otro archivo, funciona bien como se esperaba: la función devuelve el valor de conteo multiplicado por 5.

Obviamente, eso es algo que no entiendo claramente... pero ¿qué?

Estoy usando 3.2 y la etiqueta, por lo que el retorno de setup() en la etiqueta del script ya no es necesario: 3.2

Gracias de antemano.