v-bind not resolving computed object?
i have the following composable,
fieldArgs is not reactive, however each of each properties are computed values.
im trying to consume it in my template via
however the output injects the stringified, non resolved computed value with all its internals, meta properties, etc. I have to either wrap using unref or destructure useFormField and pass fieldProps that way. I don't understand, if the destructured property that is itself a composable works, why doesn't fieldArgs.fieldProps which is just the scenic route to the same property, not work?2 Replies
Hi @BinaryArtifex. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
This is a common issue with Vue's reactivity system and how refs are unwrapped in templates. The problem you're experiencing is related to how Vue handles nested refs in templates.
Why This Happens
According to the Vue documentation referenced in Nuxt's auto-imports documentation:
Auto-importedNuxt Auto-imports Vue only automatically unwraps refs that are top-level properties in the template render context. When you accessrefandcomputedwon't be unwrapped in a component<template>[...] This is due to how Vue works with refs that aren't top-level to the template.
fieldArgs.fieldProps, the fieldProps is not a top-level property, so Vue doesn't automatically unwrap it.
Solutions
You have already identified the two main solutions:
1. Destructure the composable return value:
Then use it directly in your template:
2. Use unref to manually unwrap the ref:
Why Destructuring Works
When you destructure the return value of your composable, you're making fieldProps a top-level property in your component's context, which allows Vue to automatically unwrap it in the template.
This behavior is consistent with what's shown in a Stack Overflow post where a user experienced similar issues with useState in Nuxt 3:
Ref unwrapping in templates only applies if the ref is a top-level property in the template render context.Stack Overflow Post Best Practice For cleaner templates and better reactivity handling, it's generally recommended to destructure composable return values when you need to use them in templates. This approach makes your code more readable and avoids these unwrapping issues. If you need to maintain the object structure for some reason, remember to use
.value or unref() when accessing nested reactive properties in templates.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@382140070183960576> Kapa.ai is still learning and improving, please let me know how I did by reacting below.