console.log(user) returnsRef<undefined>, butconsole.log(user, user.value) return Ref<Object>, Reactive<Object>

[mrleblanc101]

Reproduction

https://stackblitz.com/edit/github-ugyyhuvm?file=components%2FHelloWorld.vue

Steps to reproduce the bug

Is this a regression ?
I have a very simple store that export an hardcoded user object.

I added this to my component:

const store = useAuthStore();
const { user } = storeToRefs(store);
console.log(user);
console.log(user, user.value);

The first console.log is undefined.
The second one is not:

Ref<undefined>
Ref<Object>, Reactive<Object>

Expected behavior

console.log(user); alone should return Ref<Object>.

Actual behavior

console.log(user); returns Ref<undefined>.

Additional information

No response

[mrleblanc101]

Same thing with isLoggedIn.

console.log(isLoggedIn); // ComputedRef<undefined>
console.log(isLoggedIn, isLoggedIn.value); // ComputedRef<true> true

[posva]

This seems to be caused by 67d3109 and how Vue custom formatters work.

In practice I recommend you to log the .value. The fix might be in Vue's codebase

[mrleblanc101]

Do you think I should I open an issue in @vue/core and link to this ?

[posva]

You can. If I were you, I would try to reproduce it without pinia by using what storeToRefs do and try to find a fix in Vue former here

[edison1105]

@posva
I've made a PR to fix this one, PR vuejs/core#12948
please feel free to review