When it comes to declaring new reactive variables inside a component, I faced an interesting issue. It seems that setting the component globally, outside the app.component instance, and then returning it to either the data() or setup() function works perfectly fine. However, when I try to declare the reactive object directly inside the data() or setup() event, it doesn't work as expected.
Let's take a look at an example code snippet:
const editEducationData = reactive({
attainment: null,
degree: null,
yeargraduated: null
});
app.component("educationmodal", {
setup() {
// this is reactive...
return editEducationData;
// this is not reactive..
return reactive({
attainment: null,
degree: null,
yeargraduated: null
});
},
methods: {
setValues() {
// this doesen't work....
this.attainment = "value";
// this works....
editEducationData.attainment = "newvalue";
},
show() {
}
},
template:
/* html */
`<div>{{ attainment }}</div>`
});
/* this updates {{ attainment }} in template */
editEducationData.attainment = "new values";
/* this does not update {{ attainment }} in template but setValues method is firing */
app.component("educationmodal").methods.setValues();
While editing values in editEducationData works flawlessly, attempting the same with this inside the instance leads to inconsistencies (as seen in the above code).
So, what could be the potential solution to overcome this challenge?