Dynamic Rule Updates in vee-validate 4.5.11 with Vue 3 & TypeScript Not Working

[chaoowen]

Hello,

I'm currently learning Vue 3 and vee-validate. Our department uses a Vue 3 template with many useful components, and I've encountered a specific challenge I hope you can help with.

I'm working on an input component that needs to dynamically update its validation rules based on props.rules received from a parent component. The rules look something like this:

{
  required: true,
  numeric: true,
  between: [0, 100]
}

The input component is defined as follows:

<template>

  <input
    v-bind="bindings"
    v-on="listeners"
  />

</template

In the script setup, I'm using useField from vee-validate:

<script setup lang="ts">

  import { useField } from 'vee-validate'
  import type { InputValue, InputProps } from '~/libs/support/types'

  const {
    value: inputValue,
    handleChange,
  }: {
    value: Ref<InputValue>
    handleChange: (value: InputValue) => void
  } = useField(props.name, props.rules as ComputedRef<Record<string, unknown>>)

</script>

When the props.rules change (triggered by a button in the parent component), a watch confirms that the props.rules have updated. However, it appears that useField only acknowledges the initial props.rules and does not update when props.rules changes.

I suspect there might be some Vue 3 or vee-validate nuances that I'm missing. Any insights or suggestions would be greatly appreciated. If additional code or context is required, I'm happy to provide it. Thank you in advance for your assistance!

[chaoowen]

I got inspiration from #4578,and found solution like:

const {
  value: inputValue,
  handleChange,
}: {
  value: Ref<InputValue>
  handleChange: (value: InputValue) => void
} = useField(
  props.name,
  computed(() => {
    const result = useFieldRules({
      rules: props.rules,
      required: props.required,
    })
    return result.validationRules.value
  })
)

However, it's not working if you set computed variable instead of putting whole computed inside useFieldRules.

// not working in this way
const { validationRules } = computed(() => {
    const { validationRules } = useFieldRules({
      rules: props.rules,
      required: props.required,
    })
    return validationRules.value
  })
  
const {
  value: inputValue,
  handleChange,
}: {
  value: Ref<InputValue>
  handleChange: (value: InputValue) => void
} = useField(
  props.name,
  validationRules.value
)