Vue JS Vuetify Expansion Panels Inside a V-for Loop Opening all panels

I am pulling data from a data base and looping through the data in the DOM with a "v-for" loop. I have vuetify expansion panel components inside the loop. The issue is if the user clicks to open one expansion panel it opens all of the other expansion panels in the loop. I have tried using v-model but because the panels are contained in a parent loop the model is just assigned to every instance of the panel.

Here is a simplified code pen to show the basic structure I am dealing with -

https://codepen.io/jbodeen/pen/dyobPem?editable=true&editors=101

<div id="app">
<div v-for="data in testData">
  <v-expansion-panels
    v-model="panel">
    <v-expansion-panel>
      <v-expansion-panel-header>{{ data.name }}</v-expansion-panel-header>
      <v-expansion-panel-content>
        <ul>
          <li v-for="step in data.steps">{{ step.name }}</li>
        </ul>
      </v-expansion-panel-content>
    </v-expansion-panel>


  </v-expansion-panels>
</div>