I am currently developing a Vue 2 Webpack application that utilizes Vuex. My aim is to update the local state of a component by observing a computed property which retrieves data from the Vuex store. Here's an excerpt from the <script></script> section of my component:
export default {
name: 'MyComponent',
data() {
return {
// UI
modal: {
classes: {
'modal__show-modal': false,
},
tags: [],
},
};
},
computed: {
tagList() {
return this.$store.getters.tagList;
},
},
watch: {
tagList: (updatedList) => {
this.modal.tags = updatedList;
},
},
};
As evident, there is a computed property named tagList fetching data from the store. I have set up a watcher for tagList so that whenever there are changes in the store's data, I can update modal.tags accordingly.
According to the Vue documentation, I should be able to utilize this.propertyName and modify the local component state. However, when I use this.modal.tags = updatedList;, I encounter the following error:
[Vue warn]: Error in callback for watcher "tagList": "TypeError: Cannot set property 'tags' of undefined"Why does this error occur despite following the guidelines outlined in Vue.js's documentation?