After recently diving into Vue 3, I find myself struggling to grasp some key concepts of the composition API. My current challenge involves converting a library from Vue 2 to Vue 3, where a reactive property named layout is being passed down to child components.
In the parent component, I am passing down layout to children like so:
setup(props){
const layout = ref({'width': 10, ... })
return {
layout,
...
}
}
The issue arises when attempting to access width or any other reactive value within layout from child components. This requires using the syntax layout.value.width. The problem lies in the fact that throughout the project, references to layout are made using just layout.width. Therefore, adding a .value to every instance where layout is accessed becomes cumbersome. Is there a way to avoid this repetition, or am I missing crucial aspects of the composition API?