Please provide the ability to use toValue in vue

[teleskop150750]

Please provide the ability to use toValue to pass reactive parameters.

Why in solidjs parameters are passed in callback, at the same time Vue, which is also built on the signal system, does not have such a possibility. This requires writing additional abstractions that worsen dx and affect performance.

Example
Vue js

<script setup lang="ts">
import { useForm } from '@tanstack/vue-form'
import { useQuery } from '@tanstack/vue-query'
import { watchEffect, reactive } from 'vue'

const { data, isLoading } = useQuery({
  queryKey: ['data'],
  queryFn: async () => {
    await new Promise((resolve) => setTimeout(resolve, 1000))
    return { firstName: 'FirstName', lastName: 'LastName' }
  },
})

const firstName = computed(() => data.value?.firstName || '')
const lastName = computed(() => data.value?.lastName || '')

const defaultValues = reactive({
  firstName,
  lastName,
})

const form = useForm({
  defaultValues,
  onSubmit: async ({ value }) => {
    // Do something with form data
    console.log(value)
  },
})
</script>

<template>
  <p v-if="isLoading">Loading..</p>
  <form v-else @submit.prevent.stop="form.handleSubmit">
    <!-- ... -->
  </form>
</template>

SolidJS

import { createForm } from '@tanstack/solid-form'
import { createQuery } from '@tanstack/solid-query'

export default function App() {
  const { data, isLoading } = createQuery(() => ({
    queryKey: ['data'],
    queryFn: async () => {
      await new Promise((resolve) => setTimeout(resolve, 1000))
      return { firstName: 'FirstName', lastName: 'LastName' }
    },
  }))

  const form = createForm(() => ({
    defaultValues: {
      firstName: data?.firstName ?? '',
      lastName: data?.lastName ?? '',
    },
    onSubmit: async ({ value }) => {
      // Do something with form data
      console.log(value)
    },
  }))

  if (isLoading) return <p>Loading..</p>

  return null
}

The same problem exists in other tanstack libraries

An example of how pinia-colada fixes the shortcomings of vue-query

Discussion about signal api design in Vue

[crutchcorn]

Thank you.

This idea makes sense to me, I'd actually go far enough to consider this a bug if reactivity doesn't update the props on FieldAPI

I'll move this discussion to an issue and investigate it sometime this week to try and fix it

[teleskop150750]

thanks