Vue.js v-for generated html block capturing collapse state with two way data binding

I’m trying to capture click action state (for collaps function) within html v-for generated block. To achieve this, I’m using declared data table, and it looks like state is being captured correctly. Below I’m ataching simplified v-for section, where I display state after click action. Displayed state is always false, even though after click, console.log shows table fields changes. Can someone please try to explain me why is that, and how to achieve what is expected here? I’m pretty new to vue, and must be doing something wrong…

<div v-for="address in userAddressData">
  <a @click="expandControl(address.id)">
  Address {{expandArea[address.id]}}
  </a>
</div>
...
export default {
  data () {
    return {
      userAddressData: '',
      expandArea: [false,false,false]
    }
  },
methods: {
  expandControl (id) {
    this.expandArea[id] = !this.expandArea[id]
    console.log(this.expandArea)
  }
},
...

Answer

If I understood right, the problem you are having is that the template is not being updated according to the data, as we can see on this fiddle: https://jsfiddle.net/gen1kL3y/

This is issue is related to how Vue Reactivity works.

You can find another similar question here and I made a working JS fiddle for you here: https://jsfiddle.net/vz11zdjc/

Basically, instead of setting the value as this.expandArea[id] = !this.expandArea[id], you should (among other options) use Vue.set(this.expandArea, id, !this.expandArea[id])