In my quasarvue3 project i have 2 email fields and 2 radio buttons.
I am trying to create a validation condition where the field is only validated at all if the radio button related to that field is selected. So if the value for radio button is ‘option 1’ then only the first field should be validated and the second one only if it is option 2.

However no matter what I do both fields always show ‘required’ regardless of whatever the radio button value ‘selectedEmail’ is. What I am doing wrong?

<q-form ref="myForm" @submit="onSubmit">
            <q-input
              v-model="firstEmail"
              label="First E-mail"
              lazy-rules
              :rules="[
                () =>
                  selectedEmail === 'option1' ? 'required' : true,
                (val: any) => validateEmail(val)
              ]"
            ></q-input>
            <q-radio
              v-model="selectedEmail"
              keep-color
              val="option1"
              label="Main Email"
              color="primary"
            />
            <q-input
              v-model="secondEmail"
              label="Secondary email"
              lazy-rules
              :rules="[
                () =>
                  selectedEmail=== 'option2' ? 'required' : true,
                (val: any) => validateEmail(val)
              ]"
            ></q-input>
            <q-radio
              v-model="selectedEmail"
              keep-color
              val="option2"
              label="Main Email"
              color="primary"
            />
          </div>
        </div>
</q-form>