Deep reactivity in nested components and a reactive getter function

[fabianwohlfart]

Hello,

Example: https://stackblitz.com/edit/vitejs-vite-zfprcp?file=src%2FApp.vue

Let's say we have a page object with nested data.

const page = ref({
  title: '',
  content: {
    blocks: [{
      id: '',
      content: {
        headline: '',
        some: {
          nested: {
            data: ''          
          }
        }
      }
    }]
})

We pass this data down to multiple components and components in components.
How would I ideally keep the reactivity, with toRefs or everything with computed.

const props = defineProps({
  page: Object
})

const { content } = toRefs(props.block)
// or
const content = computed(() => props.block.content)

And then how would I make an easy to use getter function to access different level of this nested data.
Something like lodash.get function, but keeping the reactivity, is it ok to combine lodash.get with computed?

function getProp(object, string) {
  return computed(() => _get(object, string)
}
const headline = getProp(props.block, 'content.headline')
const date = getProp(props.block, 'content.some.nested.data')

In general I have the feeling that there must be something more smart than overusing computed?

[jacekkarczmarczyk]

const headline = getProp(props, 'block.content.headline')