Our great sponsors
-
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
Vue makes result your data() function reactive. So this.reactiveObj (which is set to null) property will be reactive. Then, in mounted(), you assign that property to something else (empty object {}). That signals vue that it needs to rerender that template block {{ reactiveObj }}. But it doesn't rerender immediately. It does so sometime after mounted() has completed. By that time reactiveObj already has some non-reactive properties in it so it happily rerenders it with whatever non-reactive content it has. After that in your button click handler you modify values of those non-reactive properties. And vue doesn't pick up that. Whether you do this with this.reactiveObj[id] = true or this.$set(this.reactiveObj, id, true) does not matter because if you look at Vue.set (or this.$set) source code here https://github.com/vuejs/vue/blob/main/src/core/observer/index.ts (find export function set(...) you'll see