Accessing methods through defineExpose and v-if Error (formOne.value.handleSubmit is not a function)

[danielohling]

Hi

I have two different forms that appear depending on what the user selects as below:

<div v-if="formTypeOne">
  <OrderFormOne ref="formOne" @form="setForm" />
</div>
<div v-if="!formTypeOne">
  <OrderFormTwo ref="formTwo" @form="setForm" />
</div> 
<VButton
 v-if="formTypeOne"
 color="primary"
 label="Save"
 :loading="loading"
 @click="submitFormOne"
/>
<VButton
 v-if="!formTypeOne"
 color="primary"
 label="Save"
 :loading="loading"
 @click="submitFormTwo"
/>

<script setup>
async function submitFormOne() {
  await formOne.value.handleSubmit()
}

async function submitFormTwo() {
  await formTwo.value.handleSubmit()
}
</script>

Each component emits an event @form which sets the form:

const setForm = async () => {
  formTypeOne.value = !formTypeOne.value
  await nextTick()
}

And both components use defineExpose to expose the handleSubmit() method.

defineExpose({
  handleSubmit,
})

The problem that occurs is that when I choose to use the formTwo's method handleSubmit() on the first attempt, the method is not exposed and I get an error according to: (formTwo.value.handleSubmit is not a function) But if I try again it goes through?

What am I doing wrong, is there another solution?