[{"data":1,"prerenderedAt":561},["ShallowReactive",2],{"content-\u002Fdocs\u002Freading-the-form\u002Fto-ref":3},{"id":4,"title":5,"body":6,"description":541,"extension":542,"meta":543,"metaRows":544,"navigation":141,"path":556,"seo":557,"source":558,"stem":559,"__hash__":560},"docs\u002Fdocs\u002Freading-the-form\u002Fto-ref.md","toRef",{"type":7,"value":8,"toc":534},"minimark",[9,16,27,30,54,159,164,171,262,266,271,311,326,330,338,404,413,417,428,485,494,498,530],[10,11,13],"h1",{"id":12},"toref",[14,15,5],"code",{},[17,18,19],"blockquote",{},[20,21,22,23,26],"p",{},"Get a ",[14,24,25],{},"Readonly\u003CRef\u003CT>>"," at any schema path, for the rare case a consumer surface expects a Vue ref instead of the values Proxy.",[28,29],"docs-meta-table",{},[20,31,32,35,36,38,39,42,43,46,47,50,51,53],{},[14,33,34],{},"form.toRef(path)"," returns a ",[14,37,25],{}," whose ",[14,40,41],{},".value"," tracks storage at ",[14,44,45],{},"path",". For normal reads (templates, computeds, conditional rendering), ",[14,48,49],{},"form.values.\u003Cpath>"," is the right call. ",[14,52,5],{}," is for ref-shaped interop only.",[55,56,61],"pre",{"className":57,"code":58,"language":59,"meta":60,"style":60},"language-ts shiki shiki-themes github-light github-dark","const schema = z.object({\n  profile: z.object({ email: z.email() }),\n  todos: z.array(z.object({ title: z.string() })),\n})\n\nconst form = useForm({ schema })\n","ts","",[14,62,63,90,107,130,136,143],{"__ignoreMap":60},[64,65,68,72,76,79,83,87],"span",{"class":66,"line":67},"line",1,[64,69,71],{"class":70},"szBVR","const",[64,73,75],{"class":74},"sj4cs"," schema",[64,77,78],{"class":70}," =",[64,80,82],{"class":81},"sVt8B"," z.",[64,84,86],{"class":85},"sScJk","object",[64,88,89],{"class":81},"({\n",[64,91,93,96,98,101,104],{"class":66,"line":92},2,[64,94,95],{"class":81},"  profile: z.",[64,97,86],{"class":85},[64,99,100],{"class":81},"({ email: z.",[64,102,103],{"class":85},"email",[64,105,106],{"class":81},"() }),\n",[64,108,110,113,116,119,121,124,127],{"class":66,"line":109},3,[64,111,112],{"class":81},"  todos: z.",[64,114,115],{"class":85},"array",[64,117,118],{"class":81},"(z.",[64,120,86],{"class":85},[64,122,123],{"class":81},"({ title: z.",[64,125,126],{"class":85},"string",[64,128,129],{"class":81},"() })),\n",[64,131,133],{"class":66,"line":132},4,[64,134,135],{"class":81},"})\n",[64,137,139],{"class":66,"line":138},5,[64,140,142],{"emptyLinePlaceholder":141},true,"\n",[64,144,146,148,151,153,156],{"class":66,"line":145},6,[64,147,71],{"class":70},[64,149,150],{"class":74}," form",[64,152,78],{"class":70},[64,154,155],{"class":85}," useForm",[64,157,158],{"class":81},"({ schema })\n",[160,161,163],"h2",{"id":162},"when-to-use-it","When to use it",[20,165,166,167,170],{},"External composables, watchers, and DevTools probes sometimes expect a ",[14,168,169],{},"Ref"," rather than a Proxy property:",[55,172,174],{"className":57,"code":173,"language":59,"meta":60,"style":60},"const emailRef = form.toRef('profile.email') \u002F\u002F Readonly\u003CRef\u003Cstring>>\n\n\u002F\u002F Hand off to any third-party composable whose signature expects a Ref\nuseThirdPartyRefConsumer(emailRef)\n\n\u002F\u002F Watch a single path explicitly\nwatch(emailRef, (next) => {\n  \u002F* respond to email changes *\u002F\n})\n",[14,175,176,204,208,213,221,225,230,251,257],{"__ignoreMap":60},[64,177,178,180,183,185,188,190,193,197,200],{"class":66,"line":67},[64,179,71],{"class":70},[64,181,182],{"class":74}," emailRef",[64,184,78],{"class":70},[64,186,187],{"class":81}," form.",[64,189,5],{"class":85},[64,191,192],{"class":81},"(",[64,194,196],{"class":195},"sZZnC","'profile.email'",[64,198,199],{"class":81},") ",[64,201,203],{"class":202},"sJ8bj","\u002F\u002F Readonly\u003CRef\u003Cstring>>\n",[64,205,206],{"class":66,"line":92},[64,207,142],{"emptyLinePlaceholder":141},[64,209,210],{"class":66,"line":109},[64,211,212],{"class":202},"\u002F\u002F Hand off to any third-party composable whose signature expects a Ref\n",[64,214,215,218],{"class":66,"line":132},[64,216,217],{"class":85},"useThirdPartyRefConsumer",[64,219,220],{"class":81},"(emailRef)\n",[64,222,223],{"class":66,"line":138},[64,224,142],{"emptyLinePlaceholder":141},[64,226,227],{"class":66,"line":145},[64,228,229],{"class":202},"\u002F\u002F Watch a single path explicitly\n",[64,231,233,236,239,243,245,248],{"class":66,"line":232},7,[64,234,235],{"class":85},"watch",[64,237,238],{"class":81},"(emailRef, (",[64,240,242],{"class":241},"s4XuR","next",[64,244,199],{"class":81},[64,246,247],{"class":70},"=>",[64,249,250],{"class":81}," {\n",[64,252,254],{"class":66,"line":253},8,[64,255,256],{"class":202},"  \u002F* respond to email changes *\u002F\n",[64,258,260],{"class":66,"line":259},9,[64,261,135],{"class":81},[160,263,265],{"id":264},"two-call-forms","Two call forms",[20,267,268,270],{},[14,269,5],{}," accepts either a dotted path or a segment tuple. Both resolve to the same leaf with the same inferred type:",[55,272,274],{"className":57,"code":273,"language":59,"meta":60,"style":60},"form.toRef('profile.email')\nform.toRef(['profile', 'email'])\n",[14,275,276,290],{"__ignoreMap":60},[64,277,278,281,283,285,287],{"class":66,"line":67},[64,279,280],{"class":81},"form.",[64,282,5],{"class":85},[64,284,192],{"class":81},[64,286,196],{"class":195},[64,288,289],{"class":81},")\n",[64,291,292,294,296,299,302,305,308],{"class":66,"line":92},[64,293,280],{"class":81},[64,295,5],{"class":85},[64,297,298],{"class":81},"([",[64,300,301],{"class":195},"'profile'",[64,303,304],{"class":81},", ",[64,306,307],{"class":195},"'email'",[64,309,310],{"class":81},"])\n",[20,312,313,314,317,318,321,322,325],{},"The dotted form is shorter and idiomatic. The tuple form is the escape hatch for keys that contain a literal ",[14,315,316],{},"."," (a dotted form can't disambiguate ",[14,319,320],{},"{ 'a.b': … }"," from nested ",[14,323,324],{},"{ a: { b: … } }","). Pick whichever matches the surrounding code's grammar.",[160,327,329],{"id":328},"read-only-by-contract","Read-only by contract",[20,331,332,334,335,337],{},[14,333,5],{}," returns ",[14,336,25],{},". Writes go through the same paths every other consumer uses:",[55,339,341],{"className":57,"code":340,"language":59,"meta":60,"style":60},"form.setValue('profile.email', 'a@b.c') \u002F\u002F imperative write\nform.register('profile.email') \u002F\u002F bound writes via v-register\nform.append('todos', { title: '' }) \u002F\u002F structural writes\n",[14,342,343,364,380],{"__ignoreMap":60},[64,344,345,347,350,352,354,356,359,361],{"class":66,"line":67},[64,346,280],{"class":81},[64,348,349],{"class":85},"setValue",[64,351,192],{"class":81},[64,353,196],{"class":195},[64,355,304],{"class":81},[64,357,358],{"class":195},"'a@b.c'",[64,360,199],{"class":81},[64,362,363],{"class":202},"\u002F\u002F imperative write\n",[64,365,366,368,371,373,375,377],{"class":66,"line":92},[64,367,280],{"class":81},[64,369,370],{"class":85},"register",[64,372,192],{"class":81},[64,374,196],{"class":195},[64,376,199],{"class":81},[64,378,379],{"class":202},"\u002F\u002F bound writes via v-register\n",[64,381,382,384,387,389,392,395,398,401],{"class":66,"line":109},[64,383,280],{"class":81},[64,385,386],{"class":85},"append",[64,388,192],{"class":81},[64,390,391],{"class":195},"'todos'",[64,393,394],{"class":81},", { title: ",[64,396,397],{"class":195},"''",[64,399,400],{"class":81}," }) ",[64,402,403],{"class":202},"\u002F\u002F structural writes\n",[20,405,406,407,409,410,412],{},"Attaform tracks dirty, touched, and validation state through those write paths. Assigning to ",[14,408,41],{}," directly throws; ",[14,411,5],{}," is a read handle, not a backdoor.",[160,414,416],{"id":415},"reactivity-contract","Reactivity contract",[20,418,419,35,421,424,425,427],{},[14,420,5],{},[14,422,423],{},"ComputedRef","-equivalent shape: reads inside reactive scopes track the path, and consumers re-run when storage at ",[14,426,45],{}," changes. Two refs to the same path share reactivity; they don't double-subscribe.",[55,429,431],{"className":57,"code":430,"language":59,"meta":60,"style":60},"const refA = form.toRef('profile.email')\nconst refB = form.toRef('profile.email')\n\n\u002F\u002F refA.value === refB.value, always.\n\u002F\u002F One storage write triggers both refs' subscribers.\n",[14,432,433,452,471,475,480],{"__ignoreMap":60},[64,434,435,437,440,442,444,446,448,450],{"class":66,"line":67},[64,436,71],{"class":70},[64,438,439],{"class":74}," refA",[64,441,78],{"class":70},[64,443,187],{"class":81},[64,445,5],{"class":85},[64,447,192],{"class":81},[64,449,196],{"class":195},[64,451,289],{"class":81},[64,453,454,456,459,461,463,465,467,469],{"class":66,"line":92},[64,455,71],{"class":70},[64,457,458],{"class":74}," refB",[64,460,78],{"class":70},[64,462,187],{"class":81},[64,464,5],{"class":85},[64,466,192],{"class":81},[64,468,196],{"class":195},[64,470,289],{"class":81},[64,472,473],{"class":66,"line":109},[64,474,142],{"emptyLinePlaceholder":141},[64,476,477],{"class":66,"line":132},[64,478,479],{"class":202},"\u002F\u002F refA.value === refB.value, always.\n",[64,481,482],{"class":66,"line":138},[64,483,484],{"class":202},"\u002F\u002F One storage write triggers both refs' subscribers.\n",[20,486,487,488,491,492,316],{},"The same path-precise reactivity Vue offers on ",[14,489,490],{},"form.values.profile.email",", just wrapped in a ",[14,493,169],{},[160,495,497],{"id":496},"where-to-next","Where to next",[499,500,501,514,523],"ul",{},[502,503,504,511,512,316],"li",{},[505,506,508],"a",{"href":507},"\u002Fdocs\u002Freading-the-form\u002Fvalues",[14,509,510],{},"values",": the Proxy you should reach for first, before ",[14,513,5],{},[502,515,516,522],{},[505,517,519],{"href":518},"\u002Fdocs\u002Freading-the-form\u002Ffields",[14,520,521],{},"fields",": the per-leaf reactive surface for state bits, not just values.",[502,524,525,529],{},[505,526,528],{"href":527},"\u002Fdocs\u002Freading-the-form\u002Fthe-form","The form",": every other reactive read on the return shape.",[531,532,533],"style",{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":60,"searchDepth":92,"depth":92,"links":535},[536,537,538,539,540],{"id":162,"depth":92,"text":163},{"id":264,"depth":92,"text":265},{"id":328,"depth":92,"text":329},{"id":415,"depth":92,"text":416},{"id":496,"depth":92,"text":497},"form.toRef hands you a Readonly\u003CRef\u003CT>> at any schema path, for the rare consumer that needs a Vue ref instead of the values Proxy.","md",{},[545,548,551,553],{"label":546,"value":547},"Category","Return method",{"label":549,"value":550,"kind":14},"Signature","toRef(path) | toRef(segments)",{"label":552,"value":25,"kind":14},"Returns",{"label":554,"value":555},"Reactive","Yes","\u002Fdocs\u002Freading-the-form\u002Fto-ref",{"title":5,"description":541},null,"docs\u002Freading-the-form\u002Fto-ref","PwRVOE8JIm-gMX1ao6ZOwe1md447E9rjDH-CuyIM6kw",1780949758790]