Getting a ref to a nested object

[epsilonhalbe]

How can I get a reactive component that updates nested properties:

I have a store defined as follows

import { defineStore } from "pinia"
export const useStore = defineStore({
    id: "poc",
    state: () => ({ str: "", nested: { obj: "" } }),
    persist: {
        enabled: true,
        strategies: [{ storage: localStorage }],
    },
})

and the following component

<script lang="ts">
import { ref } from "vue"
import { storeToRefs } from "pinia"
import { useStore } from "./store"
export default {
    setup() {
        const store = useStore()
        const example = storeToRefs(store)

        const mStr = ref(example.str)
        const mObj = ref(example.nested.value.obj) // <--- this is where I believe the problem is
        store.str = mStr.value
        store.nested.obj = mObj.value

        return { mObj, mStr, store }
    },
}
</script>

<template>
    <h1>PoC</h1>
    <input v-model="mObj" placeholder="obj" />
    <input v-model="mStr" placeholder="str" />
</template>

when I update the str field it works as expected, but for nested object it doesn't. My suspicion is that I lose reactivity when calling nested.value. I've been fiddling around with this for a day now and can't get it to work.

[epsilonhalbe]

after a little bit more of digging I found #854 which lead me to the following (much cleaner) solution

<script lang="ts">
import { useStore } from "./store"
export default {
    setup() {
        const store = useStore()
        return { store }
    },
}
</script>

<template>
    <h1>test</h1>
    <input v-model="store.str" placeholder="obj" />
    <input v-model="store.nested.obj" placeholder="str" />
</template>