[{"data":1,"prerenderedAt":371},["ShallowReactive",2],{"navigation_docs":3,"diagnostic-content-VUE0005":44},[4,8,12,16,20,24,28,32,36,40],{"title":5,"path":6,"stem":7},"CLI","\u002Fcli","1.cli",{"title":9,"path":10,"stem":11},"Nuxt","\u002Fnuxt","2.nuxt",{"title":13,"path":14,"stem":15},"Vue","\u002Fvue","3.vue",{"title":17,"path":18,"stem":19},"Vite","\u002Fvite","4.vite",{"title":21,"path":22,"stem":23},"Nitro","\u002Fnitro","5.nitro",{"title":25,"path":26,"stem":27},"TypeScript","\u002Ftypescript","6.typescript",{"title":29,"path":30,"stem":31},"shadcn","\u002Fshadcn","7.shadcn",{"title":33,"path":34,"stem":35},"Package","\u002Fpackage","8.package",{"title":37,"path":38,"stem":39},"Extending Doctor","\u002Fextending","9.extending",{"title":41,"path":42,"stem":43},"Pinia","\u002Fpinia","9.pinia",{"id":45,"title":46,"body":47,"category":53,"code":362,"description":363,"docsUrl":54,"extension":364,"fix":77,"framework":95,"meta":365,"navigation":366,"pack":56,"path":367,"ruleId":57,"rulePath":58,"seo":368,"severity":59,"source":60,"sourceUrl":61,"stem":369,"why":70,"__hash__":370},"diagnostics\u002Fdiagnostics\u002FVUE0005.md","VUE0005: Watch destructured props with a getter",{"type":48,"value":49,"toc":352},"minimark",[50,62,67,71,75,78,82,87,90,201,204,283,287,290,320,324,336,340,348],[51,52],"rule-metadata",{"category":53,"docsUrl":54,"fix":55,"pack":56,"ruleId":57,"rulePath":58,"severity":59,"source":60,"sourceUrl":61},"reactivity","https:\u002F\u002Fvuejs.org\u002Fapi\u002Fsfc-script-setup.html#reactive-props-destructure","safe","vite-doctor\u002Fvue","vue\u002Freactivity\u002Fdefineprops-watch-getter","\u002Fvue\u002Frules\u002Freactivity\u002Fdefineprops-watch-getter","error","src\u002Frule-packs\u002Fvue\u002Frules\u002Fvue\u002Fdefine-props-watch-getter.ts","https:\u002F\u002Fgithub.com\u002Fonmax\u002Fvite-doctor\u002Fblob\u002Fmain\u002Fsrc\u002Frule-packs\u002Fvue\u002Frules\u002Fvue\u002Fdefine-props-watch-getter.ts",[63,64,66],"h2",{"id":65},"why-it-happens","Why it happens",[68,69,70],"p",{},"Effects that outlive their component create leaks and stale updates. Register cleanup where Vue or VueUse can dispose it automatically.",[63,72,74],{"id":73},"fix","Fix",[68,76,77],{},"Use the Vue-supported defineProps watch getter pattern instead.",[63,79,81],{"id":80},"example","Example",[83,84,86],"h3",{"id":85},"watch-props-with-getters","Watch props with getters",[68,88,89],{},"Before",[91,92,97],"pre",{"className":93,"code":94,"language":95,"meta":96,"style":96},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nconst props = defineProps\u003C{ id: string }>()\nwatch(props.id, loadUser)\n\u003C\u002Fscript>\n","vue","",[98,99,100,135,170,191],"code",{"__ignoreMap":96},[101,102,105,109,113,117,120,123,126,130,132],"span",{"class":103,"line":104},"line",1,[101,106,108],{"class":107},"sMK4o","\u003C",[101,110,112],{"class":111},"swJcz","script",[101,114,116],{"class":115},"spNyl"," setup",[101,118,119],{"class":115}," lang",[101,121,122],{"class":107},"=",[101,124,125],{"class":107},"\"",[101,127,129],{"class":128},"sfazB","ts",[101,131,125],{"class":107},[101,133,134],{"class":107},">\n",[101,136,138,141,145,147,151,154,157,160,164,167],{"class":103,"line":137},2,[101,139,140],{"class":115},"const",[101,142,144],{"class":143},"sTEyZ"," props ",[101,146,122],{"class":107},[101,148,150],{"class":149},"s2Zo4"," defineProps",[101,152,153],{"class":107},"\u003C{",[101,155,156],{"class":111}," id",[101,158,159],{"class":107},":",[101,161,163],{"class":162},"sBMFI"," string",[101,165,166],{"class":107}," }>",[101,168,169],{"class":143},"()\n",[101,171,173,176,179,182,185,188],{"class":103,"line":172},3,[101,174,175],{"class":149},"watch",[101,177,178],{"class":143},"(props",[101,180,181],{"class":107},".",[101,183,184],{"class":143},"id",[101,186,187],{"class":107},",",[101,189,190],{"class":143}," loadUser)\n",[101,192,194,197,199],{"class":103,"line":193},4,[101,195,196],{"class":107},"\u003C\u002F",[101,198,112],{"class":111},[101,200,134],{"class":107},[68,202,203],{},"After",[91,205,207],{"className":93,"code":206,"language":95,"meta":96,"style":96},"\u003Cscript setup lang=\"ts\">\nconst props = defineProps\u003C{ id: string }>()\nwatch(() => props.id, loadUser)\n\u003C\u002Fscript>\n",[98,208,209,229,251,275],{"__ignoreMap":96},[101,210,211,213,215,217,219,221,223,225,227],{"class":103,"line":104},[101,212,108],{"class":107},[101,214,112],{"class":111},[101,216,116],{"class":115},[101,218,119],{"class":115},[101,220,122],{"class":107},[101,222,125],{"class":107},[101,224,129],{"class":128},[101,226,125],{"class":107},[101,228,134],{"class":107},[101,230,231,233,235,237,239,241,243,245,247,249],{"class":103,"line":137},[101,232,140],{"class":115},[101,234,144],{"class":143},[101,236,122],{"class":107},[101,238,150],{"class":149},[101,240,153],{"class":107},[101,242,156],{"class":111},[101,244,159],{"class":107},[101,246,163],{"class":162},[101,248,166],{"class":107},[101,250,169],{"class":143},[101,252,253,255,258,261,264,267,269,271,273],{"class":103,"line":172},[101,254,175],{"class":149},[101,256,257],{"class":143},"(",[101,259,260],{"class":107},"()",[101,262,263],{"class":115}," =>",[101,265,266],{"class":143}," props",[101,268,181],{"class":107},[101,270,184],{"class":143},[101,272,187],{"class":107},[101,274,190],{"class":143},[101,276,277,279,281],{"class":103,"line":193},[101,278,196],{"class":107},[101,280,112],{"class":111},[101,282,134],{"class":107},[63,284,286],{"id":285},"verify-the-fix","Verify the fix",[68,288,289],{},"Run only this rule after editing so the report stays focused on the diagnostic you are closing:",[91,291,295],{"className":292,"code":293,"language":294,"meta":96,"style":96},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","pnpm vite-doctor . --framework vue --rules vue\u002Freactivity\u002Fdefineprops-watch-getter\n","bash",[98,296,297],{"__ignoreMap":96},[101,298,299,302,305,308,311,314,317],{"class":103,"line":104},[101,300,301],{"class":162},"pnpm",[101,303,304],{"class":128}," vite-doctor",[101,306,307],{"class":128}," .",[101,309,310],{"class":128}," --framework",[101,312,313],{"class":128}," vue",[101,315,316],{"class":128}," --rules",[101,318,319],{"class":128}," vue\u002Freactivity\u002Fdefineprops-watch-getter\n",[63,321,323],{"id":322},"useful-links","Useful links",[325,326,327],"ul",{},[328,329,330],"li",{},[331,332,335],"a",{"href":54,"rel":333},[334],"nofollow","Upstream docs",[63,337,339],{"id":338},"related-rule","Related rule",[325,341,342],{},[328,343,344],{},[331,345,346],{"href":58},[98,347,57],{},[349,350,351],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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);}",{"title":96,"searchDepth":137,"depth":137,"links":353},[354,355,356,359,360,361],{"id":65,"depth":137,"text":66},{"id":73,"depth":137,"text":74},{"id":80,"depth":137,"text":81,"children":357},[358],{"id":85,"depth":172,"text":86},{"id":285,"depth":137,"text":286},{"id":322,"depth":137,"text":323},{"id":338,"depth":137,"text":339},"VUE0005","Finds Vue reactivity code that can be written with a clearer framework-supported pattern.","md",{},true,"\u002Fdiagnostics\u002Fvue0005",{"title":46,"description":363},"diagnostics\u002FVUE0005","BErAkI8kK6kvADjGjdTD21GvaaKYKMwxGRoqGKyg0go",1791309480367]