vue.js - Vuetify v-expansion-panels open by default is within a for loop, how to separate their default open state - Stack Overf

I have a v-expansion-panel within a for loop. My goal is to have just the first expansion open by default and all following panels be closed by default. The problem is when I expand a panel it also expands the panel in the following loop. They are tied together; how can I separate them?

<template>
  <div v-for="(table, index) in tables" :key="index">
    <v-select></v-select>
    <v-expansion-panels
      v-model="expanded"
      :readonly="readonly"
      multiple
    >
      <v-expansion-panel>
        <v-expansion-panel-title>Panel 1</v-expansion-panel-title>
        <v-expansion-panel-text>
          Some content
        </v-expansion-panel-text>
      </v-expansion-panel>

      <v-expansion-panel>
        <v-expansion-panel-title>Panel 2</v-expansion-panel-title>
        <v-expansion-panel-text>
          Some content
        </v-expansion-panel-text>
      </v-expansion-panel>
  </div>
</template>

<script>
  const expanded = ref([0,1]);
</script>

I would try to do the loop on the expansion panel instead of the div, except this would mess with my v-inputs.