title: Accessing reactive properties with vee-validate 4
body: <p>I am getting my head around Vee-Validate next (v4) and how I might incorporate it in a Vue 3 project without loosing Vue's reactivity (i.e. not relying on the values simply being passed to the Form submit event).</p>
  <p>By way of example, if I were making a hypothetical component which has autocomplete functionality, and sent a get request to the server once 3 letters had been typed, but for the input itself to be valid it required 8 letters, how would I get the value associated with the input?</p>
  <p>using plain Vue, with pseudo-code something like:</p>
  <pre class="lang-js prettyprint-override"><code>defineComponent({
    setup () {
      const myVal = ref('')
      const options = ref([])
      watchEffect(() =&gt; if (myVal.value.length &gt; 3) {
        axios.get(...).then(serverVals =&gt; options.value = serverVals))
      })
      return { myVal, options }
  </code></pre>
  <p>how would I achieve this with vee-validate 4.x?</p>
  <pre class="lang-js prettyprint-override"><code>defineComponent({
    setup () {
      const schema = yup.object({ myVal: yup.string().required().min(8) })
      // ???? what now to watch myVal 
  </code></pre>
  <p>please note this is not about autocomplete - a range slider where I wanted a server call when the value was greater than 10 but a validation message if greater than 90 would also suffice as an example.</p>