Conditional validation with yup and useField

[ali-418]

I'm using useForm and a single yup schema to validate a form but the form is quite large so my schema is really long (~300 lines so far). I would like to separate parts of the schema based on the section they belong in but I'm not sure how to go about handling conditional validation in this case.

My schema structure looks something like this:

object({
  section1: object({
    status: string().required()
  }),
  section2: object({
    phone: string().when("$section1.status", {
      is: "active",
      then: (schema) => schema.required()
    })
  })
})

I want to conditionally require fields in other sections depending on the status field in section1 but when I separate it by section, I'm not able to refer to the status field from the other section.

// component - section1
useField("section1.status", string().required())

// component - section2
useField("section2.phone, string().when("$section1.status", {
  is: "active",
  then: (schema) => schema.required()
})

An option I considered is getting the value of the status field via useField or useFieldValue and then returning a computed schema for the phone field depending on the status value but this seems like it would get messy quickly with many sections and fields.

I'm also using custom input components like the example in the docs
https://vee-validate.logaretm.com/v4/guide/composition-api/custom-inputs/

Any advice on the best way to approach this would be greatly appreciated!