Vue conditionally update options of a select input based on the value of previous select input using FormKit

Question

I am working on a multistep form in Vue and Formkit. It has four steps:

1. Group Info
2. Practices
3. Locations
4. Providers

Practices, Locations, and Providers are 'repeaters' - where you can add multiple groups of data, creating an array of objects.

{
  "formSteps": {
    "groupStep": {
      "fullAddress": {},
      "pointOfContact": {},
      "contractApproval": {}
    },
    "practiceStep": {
      "practices": [
        {
          "name": "test 1",
          "id": "0"
        },
        {
          "name": "test 2",
          "id": "1"
        },
        {
          "name": "test 3",
          "id": "2"
        }
      ]
    },
    "locationStep": {
      "locations": [
        {
          "practiceId": "0",
          "name": "ent office",
          "id": "0",
          "emr": {},
          "fullAddress": {},
          "officeManager": {}
        },
        {
          "practiceId": "1",
          "name": "dentist office",
          "id": "1",
          "emr": {},
          "fullAddress": {},
          "officeManager": {}
        }
      ]
    },
    "providerStep": {
      "providers": [
        {
          "id": "0",
          "practice": "0",
          "primaryLocation": ""
        }
      ]
    }
  }
}

In the Providers step, there is a "Practice" select where the options are created by iterating over formSteps.practiceStep.practices.

<FormKit
   type="select"
   label="Practice"
   name="practice"
   :id="`provPractice_${index}`"
>
   <option value="" selected disabled>Select a practice...</option>
   <option v-for="(practice, index) in formData.formSteps.practiceStep.practices" :key="index" :value="practice.id">{{ practice.name }}</option>
</FormKit>
<FormKit
   type="select"
   label="Primary Location"
   name="primaryLocation"
   :id="`provPrimaryLocation_${index}`"
   v-model="`provPractice_${index}`.value"
>
   <option value="" selected disabled>Select a location...</option>
   <!-- Dynamically rendered options that match practiceId here -->
</FormKit>

Underneath it is a "Primary Location" select where the options needs to be dynamically rendered by comparing the value of the option selected in "Practice" to practiceID in formSteps.locationStep.locations, and if they equal, populate the matching options.

What would be the best way to tackle this?

FormKit documentation offers a flat, simple example here

<script>
const flavors = computed(() => {
  if (formData.value.food === 'Ice Cream') {
    return ['Chocolate', 'Vanilla']
  }
  return ['Pepperoni', 'Cheese']
})
</script>

<template>
  <FormKit type="form" v-model="formData">
    <FormKit
      type="select"
      label="Food"
      name="food"
      :options="['Pizza', 'Ice Cream']"
    />
    <FormKit
      type="select"
      label="Flavor"
      name="flavor"
      :options="flavors"
    />
  </FormKit>
</template>

I'm just unsure on how to do something similar with the more complex data in my case.