[{"data":1,"prerenderedAt":610},["ShallowReactive",2],{"navigation_docs":3,"diagnostic-content-VUE0003":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":602,"description":603,"docsUrl":54,"extension":604,"fix":77,"framework":95,"meta":605,"navigation":415,"pack":56,"path":606,"ruleId":57,"rulePath":58,"seo":607,"severity":59,"source":60,"sourceUrl":61,"stem":608,"why":70,"__hash__":609},"diagnostics\u002Fdiagnostics\u002FVUE0003.md","VUE0003: Do not mutate state in onUpdated",{"type":48,"value":49,"toc":591},"minimark",[50,62,67,71,75,78,82,87,90,211,214,283,287,289,368,370,521,525,528,559,563,575,579,587],[51,52],"rule-metadata",{"category":53,"docsUrl":54,"fix":55,"pack":56,"ruleId":57,"rulePath":58,"severity":59,"source":60,"sourceUrl":61},"lifecycle","https:\u002F\u002Fvuejs.org\u002Fapi\u002Fcomposition-api-lifecycle.html#onupdated","suggestion","vite-doctor\u002Fvue","vue\u002Flifecycle\u002Fno-mutation-in-onupdated","\u002Fvue\u002Frules\u002Flifecycle\u002Fno-mutation-in-onupdated","error","src\u002Frule-packs\u002Fvue\u002Frules\u002Fvue\u002Fno-mutation-in-on-updated.ts","https:\u002F\u002Fgithub.com\u002Fonmax\u002Fvite-doctor\u002Fblob\u002Fmain\u002Fsrc\u002Frule-packs\u002Fvue\u002Frules\u002Fvue\u002Fno-mutation-in-on-updated.ts",[63,64,66],"h2",{"id":65},"why-it-happens","Why it happens",[68,69,70],"p",{},"onUpdated runs after any DOM update caused by reactive state. Mutating reactive component state there can schedule another update and create an update loop.",[63,72,74],{"id":73},"fix","Fix",[68,76,77],{},"Do not write to reactive values in onUpdated. Move the state change to the event or state transition that owns it, or use non-reactive local state for bookkeeping that does not drive rendering.",[63,79,81],{"id":80},"example","Example",[83,84,86],"h3",{"id":85},"use-non-reactive-bookkeeping","Use non-reactive bookkeeping",[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 updateCount = ref(0)\nonUpdated(() => {\n  updateCount.value++\n})\n\u003C\u002Fscript>\n","vue","",[98,99,100,135,161,178,193,201],"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,158],{"class":103,"line":137},2,[101,139,140],{"class":115},"const",[101,142,144],{"class":143},"sTEyZ"," updateCount ",[101,146,122],{"class":107},[101,148,150],{"class":149},"s2Zo4"," ref",[101,152,153],{"class":143},"(",[101,155,157],{"class":156},"sbssI","0",[101,159,160],{"class":143},")\n",[101,162,164,167,169,172,175],{"class":103,"line":163},3,[101,165,166],{"class":149},"onUpdated",[101,168,153],{"class":143},[101,170,171],{"class":107},"()",[101,173,174],{"class":115}," =>",[101,176,177],{"class":107}," {\n",[101,179,181,184,187,190],{"class":103,"line":180},4,[101,182,183],{"class":143},"  updateCount",[101,185,186],{"class":107},".",[101,188,189],{"class":143},"value",[101,191,192],{"class":107},"++\n",[101,194,196,199],{"class":103,"line":195},5,[101,197,198],{"class":107},"}",[101,200,160],{"class":143},[101,202,204,207,209],{"class":103,"line":203},6,[101,205,206],{"class":107},"\u003C\u002F",[101,208,112],{"class":111},[101,210,134],{"class":107},[68,212,213],{},"After",[91,215,217],{"className":93,"code":216,"language":95,"meta":96,"style":96},"\u003Cscript setup lang=\"ts\">\nlet updateCount = 0\nonUpdated(() => {\n  updateCount++\n})\n\u003C\u002Fscript>\n",[98,218,219,239,251,263,269,275],{"__ignoreMap":96},[101,220,221,223,225,227,229,231,233,235,237],{"class":103,"line":104},[101,222,108],{"class":107},[101,224,112],{"class":111},[101,226,116],{"class":115},[101,228,119],{"class":115},[101,230,122],{"class":107},[101,232,125],{"class":107},[101,234,129],{"class":128},[101,236,125],{"class":107},[101,238,134],{"class":107},[101,240,241,244,246,248],{"class":103,"line":137},[101,242,243],{"class":115},"let",[101,245,144],{"class":143},[101,247,122],{"class":107},[101,249,250],{"class":156}," 0\n",[101,252,253,255,257,259,261],{"class":103,"line":163},[101,254,166],{"class":149},[101,256,153],{"class":143},[101,258,171],{"class":107},[101,260,174],{"class":115},[101,262,177],{"class":107},[101,264,265,267],{"class":103,"line":180},[101,266,183],{"class":143},[101,268,192],{"class":107},[101,270,271,273],{"class":103,"line":195},[101,272,198],{"class":107},[101,274,160],{"class":143},[101,276,277,279,281],{"class":103,"line":203},[101,278,206],{"class":107},[101,280,112],{"class":111},[101,282,134],{"class":107},[83,284,286],{"id":285},"move-reactive-writes-to-the-owner","Move reactive writes to the owner",[68,288,89],{},[91,290,292],{"className":93,"code":291,"language":95,"meta":96,"style":96},"\u003Cscript setup lang=\"ts\">\nconst count = ref(0)\nonUpdated(() => {\n  count.value++\n})\n\u003C\u002Fscript>\n",[98,293,294,314,331,343,354,360],{"__ignoreMap":96},[101,295,296,298,300,302,304,306,308,310,312],{"class":103,"line":104},[101,297,108],{"class":107},[101,299,112],{"class":111},[101,301,116],{"class":115},[101,303,119],{"class":115},[101,305,122],{"class":107},[101,307,125],{"class":107},[101,309,129],{"class":128},[101,311,125],{"class":107},[101,313,134],{"class":107},[101,315,316,318,321,323,325,327,329],{"class":103,"line":137},[101,317,140],{"class":115},[101,319,320],{"class":143}," count ",[101,322,122],{"class":107},[101,324,150],{"class":149},[101,326,153],{"class":143},[101,328,157],{"class":156},[101,330,160],{"class":143},[101,332,333,335,337,339,341],{"class":103,"line":163},[101,334,166],{"class":149},[101,336,153],{"class":143},[101,338,171],{"class":107},[101,340,174],{"class":115},[101,342,177],{"class":107},[101,344,345,348,350,352],{"class":103,"line":180},[101,346,347],{"class":143},"  count",[101,349,186],{"class":107},[101,351,189],{"class":143},[101,353,192],{"class":107},[101,355,356,358],{"class":103,"line":195},[101,357,198],{"class":107},[101,359,160],{"class":143},[101,361,362,364,366],{"class":103,"line":203},[101,363,206],{"class":107},[101,365,112],{"class":111},[101,367,134],{"class":107},[68,369,213],{},[91,371,373],{"className":93,"code":372,"language":95,"meta":96,"style":96},"\u003Cscript setup lang=\"ts\">\nconst count = ref(0)\n\nfunction increment() {\n  count.value++\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton type=\"button\" @click=\"increment\">{{ count }}\u003C\u002Fbutton>\n\u003C\u002Ftemplate>\n",[98,374,375,395,411,417,429,439,444,453,458,468,512],{"__ignoreMap":96},[101,376,377,379,381,383,385,387,389,391,393],{"class":103,"line":104},[101,378,108],{"class":107},[101,380,112],{"class":111},[101,382,116],{"class":115},[101,384,119],{"class":115},[101,386,122],{"class":107},[101,388,125],{"class":107},[101,390,129],{"class":128},[101,392,125],{"class":107},[101,394,134],{"class":107},[101,396,397,399,401,403,405,407,409],{"class":103,"line":137},[101,398,140],{"class":115},[101,400,320],{"class":143},[101,402,122],{"class":107},[101,404,150],{"class":149},[101,406,153],{"class":143},[101,408,157],{"class":156},[101,410,160],{"class":143},[101,412,413],{"class":103,"line":163},[101,414,416],{"emptyLinePlaceholder":415},true,"\n",[101,418,419,422,425,427],{"class":103,"line":180},[101,420,421],{"class":115},"function",[101,423,424],{"class":149}," increment",[101,426,171],{"class":107},[101,428,177],{"class":107},[101,430,431,433,435,437],{"class":103,"line":195},[101,432,347],{"class":143},[101,434,186],{"class":107},[101,436,189],{"class":143},[101,438,192],{"class":107},[101,440,441],{"class":103,"line":203},[101,442,443],{"class":107},"}\n",[101,445,447,449,451],{"class":103,"line":446},7,[101,448,206],{"class":107},[101,450,112],{"class":111},[101,452,134],{"class":107},[101,454,456],{"class":103,"line":455},8,[101,457,416],{"emptyLinePlaceholder":415},[101,459,461,463,466],{"class":103,"line":460},9,[101,462,108],{"class":107},[101,464,465],{"class":111},"template",[101,467,134],{"class":107},[101,469,471,474,477,480,482,484,486,488,491,493,495,498,500,503,506,508,510],{"class":103,"line":470},10,[101,472,473],{"class":107},"  \u003C",[101,475,476],{"class":111},"button",[101,478,479],{"class":115}," type",[101,481,122],{"class":107},[101,483,125],{"class":107},[101,485,476],{"class":128},[101,487,125],{"class":107},[101,489,490],{"class":115}," @click",[101,492,122],{"class":107},[101,494,125],{"class":107},[101,496,497],{"class":128},"increment",[101,499,125],{"class":107},[101,501,502],{"class":107},">",[101,504,505],{"class":143},"{{ count }}",[101,507,206],{"class":107},[101,509,476],{"class":111},[101,511,134],{"class":107},[101,513,515,517,519],{"class":103,"line":514},11,[101,516,206],{"class":107},[101,518,465],{"class":111},[101,520,134],{"class":107},[63,522,524],{"id":523},"verify-the-fix","Verify the fix",[68,526,527],{},"Run only this rule after editing so the report stays focused on the diagnostic you are closing:",[91,529,533],{"className":530,"code":531,"language":532,"meta":96,"style":96},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","pnpm vite-doctor . --framework vue --rules vue\u002Flifecycle\u002Fno-mutation-in-onupdated\n","bash",[98,534,535],{"__ignoreMap":96},[101,536,537,541,544,547,550,553,556],{"class":103,"line":104},[101,538,540],{"class":539},"sBMFI","pnpm",[101,542,543],{"class":128}," vite-doctor",[101,545,546],{"class":128}," .",[101,548,549],{"class":128}," --framework",[101,551,552],{"class":128}," vue",[101,554,555],{"class":128}," --rules",[101,557,558],{"class":128}," vue\u002Flifecycle\u002Fno-mutation-in-onupdated\n",[63,560,562],{"id":561},"useful-links","Useful links",[564,565,566],"ul",{},[567,568,569],"li",{},[570,571,574],"a",{"href":54,"rel":572},[573],"nofollow","Upstream docs",[63,576,578],{"id":577},"related-rule","Related rule",[564,580,581],{},[567,582,583],{},[570,584,585],{"href":58},[98,586,57],{},[588,589,590],"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 .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}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);}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}",{"title":96,"searchDepth":137,"depth":137,"links":592},[593,594,595,599,600,601],{"id":65,"depth":137,"text":66},{"id":73,"depth":137,"text":74},{"id":80,"depth":137,"text":81,"children":596},[597,598],{"id":85,"depth":163,"text":86},{"id":285,"depth":163,"text":286},{"id":523,"depth":137,"text":524},{"id":561,"depth":137,"text":562},{"id":577,"depth":137,"text":578},"VUE0003","Flags mutation in onupdated in Vue lifecycle code before it leaks into runtime behavior.","md",{},"\u002Fdiagnostics\u002Fvue0003",{"title":46,"description":603},"diagnostics\u002FVUE0003","bkfqUbcoGlqOTellUvqL57LclFubvw0NGzVjJVPLeK8",1791309482150]