I noticed really strange behavior between nested computed/ref from @vue/composition-api and vue.
const options = ref([{
val: computed(() => 10)
}])
Print value with VueJS 2
console.log(options.value[0].val.value) // 10
https://jsfiddle.net/shenron/q7wxon95/13/
Print value with VueJS 3
console.log(options.value[0].val) // 10
https://jsfiddle.net/shenron/q7wxon95/10/
Use case
My use case, I have two components. A custom Select and a custom Option. The custom select provide a list of options, and each option register itself.
Here the type of the list of options:
type Option = {
value: string;
label: string;
root: Ref<HTMLElement>
};
const options: Ref<Array<Option>> = ref([]);
The custom select to access to root has to do:
// VueJS 3
options.value.forEach((opt) => console.log(opt.root)) // not opt.root.value
// VueJS 2
options.value.forEach((opt) => console.log(opt.root.value))
https://jsfiddle.net/shenron/q7wxon95/
I’m a bit confused, is it normal?
Thank you very much.
Original question: https://forum.vuejs.org/t/different-behavior-between-computed-ref-from-vue-composition-api-and-vue/112717