{"id":13058,"date":"2025-08-04T06:09:17","date_gmt":"2025-08-04T06:09:17","guid":{"rendered":"https:\/\/www.bacancytechnology.com\/qanda\/?p=13058"},"modified":"2025-08-04T06:09:17","modified_gmt":"2025-08-04T06:09:17","slug":"replace-reactive-object-without-losing-reactivity","status":"publish","type":"post","link":"https:\/\/www.bacancytechnology.com\/qanda\/vue\/replace-reactive-object-without-losing-reactivity","title":{"rendered":"replace\/update Reactive Object Without Losing Reactivity"},"content":{"rendered":"<p>If you try to completely replace a reactive object (e.g., state = newObject), you lose reactivity because you&#8217;re assigning a new object instead of mutating the existing reactive reference.<\/p>\n<h3>1. Using Object.assign() (recommended for reactive() objects)<\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/assets.bacancytechnology.com\/qanda\/wp-content\/uploads\/2025\/08\/04060551\/object-1.png\" alt=\"\" width=\"443\" height=\"183\" class=\"alignnone size-full wp-image-13060\" srcset=\"https:\/\/assets.bacancytechnology.com\/qanda\/wp-content\/uploads\/2025\/08\/04060551\/object-1.png 443w, https:\/\/assets.bacancytechnology.com\/qanda\/wp-content\/uploads\/2025\/08\/04060551\/object-1-300x124.png 300w\" sizes=\"(max-width: 443px) 100vw, 443px\" \/><\/p>\n<p>This keeps the original state object and simply updates its properties, preserving reactivity.<\/p>\n<h3>2. Using ref() with an object<\/h3>\n<p>If you&#8217;re using ref:<br \/>\n<img decoding=\"async\" src=\"https:\/\/assets.bacancytechnology.com\/qanda\/wp-content\/uploads\/2025\/08\/04060657\/object-ref.png\" alt=\"object-ref\" width=\"443\" height=\"183\" class=\"alignnone size-full wp-image-13061\" srcset=\"https:\/\/assets.bacancytechnology.com\/qanda\/wp-content\/uploads\/2025\/08\/04060657\/object-ref.png 443w, https:\/\/assets.bacancytechnology.com\/qanda\/wp-content\/uploads\/2025\/08\/04060657\/object-ref-300x124.png 300w\" sizes=\"(max-width: 443px) 100vw, 443px\" \/><\/p>\n<p>This works because ref() tracks .value, and assigning to .value triggers reactivity.<br \/>\nDon&#8217;t do this with reactive():<br \/>\n<img decoding=\"async\" src=\"https:\/\/assets.bacancytechnology.com\/qanda\/wp-content\/uploads\/2025\/08\/04060803\/track-output.png\" alt=\"track-output\" width=\"575\" height=\"97\" class=\"alignnone size-full wp-image-13062\" srcset=\"https:\/\/assets.bacancytechnology.com\/qanda\/wp-content\/uploads\/2025\/08\/04060803\/track-output.png 575w, https:\/\/assets.bacancytechnology.com\/qanda\/wp-content\/uploads\/2025\/08\/04060803\/track-output-300x51.png 300w\" sizes=\"(max-width: 575px) 100vw, 575px\" \/><\/p>\n<h2>Rule of Thumb<\/h2>\n<ul>\n<li>Use Object.assign() or direct mutation if you&#8217;re using reactive().<\/li>\n<li>Use .value replacement if you&#8217;re using ref().<\/li>\n<\/ul>\n<div class=\"qanda-read-box\"><div class=\"bg-light read-more-icon\"><img decoding=\"async\" src=\"https:\/\/assets.bacancytechnology.com\/qanda\/wp-content\/uploads\/2025\/04\/24061434\/read-txt.png\" alt=\"Also Read\"><p><\/p><h3>Also Read:<\/h3><a href=\"https:\/\/www.bacancytechnology.com\/blog\/vuejs-app-performance-optimization\" target=\"_blank\">Vuejs App Performance Optimization<\/a><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>If you try to completely replace a reactive object (e.g., state = newObject), you lose reactivity because you&#8217;re assigning a new object instead of mutating the existing reactive reference. 1. Using Object.assign() (recommended for reactive() objects) This keeps the original state object and simply updates its properties, preserving reactivity. 2. Using ref() with an object [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":13059,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[13],"tags":[],"class_list":["post-13058","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-vue"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/13058"}],"collection":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/comments?post=13058"}],"version-history":[{"count":1,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/13058\/revisions"}],"predecessor-version":[{"id":13063,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/13058\/revisions\/13063"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media\/13059"}],"wp:attachment":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media?parent=13058"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/categories?post=13058"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/tags?post=13058"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}