What problem does this feature solve?

const formState = useFormStore();
const { form } = toRefs(formState);
const setForm = toRef(form.value, 'displaySettings');

when replace formState.form the setForm data not change.

What does the proposed API look like?

when replace formState.form the setForm data also change.

When you assign or destructure a reactive object's property to a local variable, the reactivity is "disconnected" because access to the local variable no longer triggers the get / set proxy traps.

You could use a computed property instead.

i do not understand, toRefs as intro is to solve reactivity 'disconnected', my problem is toRefs two times the reactivity connect will lose, if just one time, this will work fine. why two times will lose reactivity connect but one time not?

It's not about "two times". it's about passing the value of the ref to toRefs. as soon as form.value is assigned another value, your old ref will be referring old state:

const form.value = {
  displaySettings: 'whatever'
}

const setForm = toRef(form.value, 'displaySettings')
console.log(setForm.value) // => 'whatever'

form.value = {
  displaySettings: 'something else'
}

console.log(setForm.value) // => still 'whatever', because it's still referring to the first object, not the new one.

As I said, a computed property would be more appropriate here, presumably. your example code is incomplete so I can't know your exact use case.

For further questions please ask in the community on chat.vuejs.org

You are right, Thank you