@prefecthq/prefect-ui-library/src/compositions/useReactiveField.ts

This library is the Vue and Typescript component library for [Prefect 2](https://github.com/PrefectHQ/prefect) and [Prefect Cloud 2](https://www.prefect.io/cloud/). _The components and utilities in this project are not meant to be used independently_.

import { useField } from 'vee-validate'
import { Ref, watch } from 'vue'

export function useReactiveField<T>(sourceRef: Ref<T>, ...[name, rules, opts = {}]: Parameters<typeof useField<T>>): ReturnType<typeof useField> {
  const field = useField<T>(name, rules, {
    ...opts,
    initialValue: sourceRef,
  })

  const { value: fieldRef } = field

  watch(fieldRef, fieldValue => sourceRef.value = fieldValue)

  watch(sourceRef, sourceValue => {
    if (sourceValue !== fieldRef.value) {
      fieldRef.value = sourceValue
    }
  })

  return field
}