Vue JS change to-be-edited variable depending on parameter passed into function

Hi JS (and general) newbie here,

I’m currently trying to make simple webpage with Vue JS which has clickable content which results in that section expanding to reveal more content.

I did this with a boolean variable “expanded” which gets toggled on-click.

<q-card @click="expand_header()">
<div v-show="expanded">

export default {
  setup() {
    return {
      expanded: ref(false),
    };
  },
}

expand_header: function () {

      this.expanded = !this.expanded;

    },

However, because I am trying to add this functionality to multiple boxes, I wanted to abstract this functionality and pass a paramater when the function is called which will edit the corresponding variable, and I was wondering what the correct syntax would be.

Newbiew instincts told me to pass a number parameter into the function which will edit one of similar variables like so:

@click="expand_header(1)"
@click="expand_header(2)"
<div v-show="expanded1">content<div>
<div v-show="expanded2">content<div>

export default {
  setup() {
    return {
      expanded1: ref(false),
      expanded2: ref(false),
    };
  },
}

expand_header: function (num) {

      this.expanded[num] = !this.expanded[num];

    },

or so:

expand_header: function (num) {

      this.expanded + num = !this.expanded + num;

    },

however this is clearly not the correct syntax.

I was not sure where I could find documentation or guides on JS syntax for this type of problem, so any input or docu recommendation would be greatly appreciated!