[Vuejs]-Destructuring nested objects in a Vue.js Pinia store

I think you can use computed property like this:

// App.vue
<template>
  <div>
  <Things id="1" />
  </div>
</template>

<script setup>
import Things from "./components/Things.vue"
</script>

// Things.vue
<template>
  <div>
  <label>
      Name:
      <input v-model="name">
  </label>
  <p>{{ name }}</p>
  </div>
</template>

<script setup>
import { computed } from "vue"
import { useStore } from '@/store/index.js'

const props = defineProps({ id: { type: String, required: true } })
const store = useStore()
const name = computed({
  get() {
    return store.things[props.id].name
  },
  set(name) {
    store.things[props.id].name = name
  }
})
</script>

sandbox:
https://codesandbox.io/s/pinia-playground-forked-6294kh