Traté de crear ganchos reutilizables/componibles en vuejs 3 llamados useCounter . La función devuelve el count objetos (ref) y increment . Cuando configuro v-model.number="counter.count" representará [object Object], pero para v-model.number="count" se representará correctamente

Incremento counter.count desde App.vue en increment() también funciona

aplicación.vue

 <script setup> import { ref, computed, unref } from 'vue' import useCount from './useCount.js' const count = ref(5) const counter = useCount({ initialCount: 5 }) const increment = () => { count.value++ // Added counter.count.value++ // Added } console.log("count", count) console.log("counter.count", counter.count) </script> <template> <h1>{{ counter.count }}</h1> <input v-model.number="counter.count" /> <button @click="counter.increment"> Increment useCount </button> <h1>{{ count }}</h1> <input v-model.number="count" /> <button @click="increment"> Increment all </button> </template>

usarContador.js

 import { ref } from 'vue' const useCount = (props = {}) => { const count = ref(props.initialCount ?? 0) const increment = () => { count.value++ } return { increment, count, } } export default useCount

Resultado: Captura de pantalla