@olaf You are almost there. I suggest that you use the v-model pattern for what you want to accomplish

<treats-named-editor :value=selectedTreat  v-model=selectedTreat   />

In your component do this

<template>
  <q-card-section class="q-gutter-sm">
    <div class="text-h6">Object in props</div>
    <q-input outlined :value="local.name" @input="$emit('input', local)" label="Name"/>
    <q-input outlined :value="local.calories" @input="$emit('input', local)" label="Calories"
    />
  </q-card-section>
</template>

<script>
export default {
  props: {
    treat: Object
 },
  created () {
     this.local = this.treat // we can't change **treat** so we assign it to a new variable
  },
  data () {
     return {
         local: null
    }
 }
}
</script>

@olaf I have moved the handler to a method

<template>
  <q-card-section class="q-gutter-sm">
    <div class="text-h6">Object in props</div>
    <div class="text-h6">This is not fully reactive any more</div>
    <q-input outlined :value="local.name" @input="onLocalValueChange" label="Name"/>
    <q-input outlined :value="local.calories" @input="onLocalValueChange" label="Calories"/>
  </q-card-section>
</template>

<script>
export default {
  props: {
    treat: Object
  },
  created() {
    this.local = this.treat // we can't change **treat** so we assign it to a new variable
  },
  data() {
    return {
      local: null
    }
  },
  methods: {
    onLocalValueChange()
    {
      this.$emit('input', this.local)
    }
  }
  
}
</script>

Forgot: Yes I saw the codesandbox and saved my changes there as well

@Hawkeye64 Yes you are right. I usually take props’ values and do something with them and assign the result to a local value. I guess it is just a habit now lol

@olaf You are almost there. I suggest that you use the v-model pattern for what you want to accomplish

<treats-named-editor :value=selectedTreat  v-model=selectedTreat   />

In your component do this

<template>
  <q-card-section class="q-gutter-sm">
    <div class="text-h6">Object in props</div>
    <q-input outlined :value="local.name" @input="$emit('input', local)" label="Name"/>
    <q-input outlined :value="local.calories" @input="$emit('input', local)" label="Calories"
    />
  </q-card-section>
</template>

<script>
export default {
  props: {
    treat: Object
 },
  created () {
     this.local = this.treat // we can't change **treat** so we assign it to a new variable
  },
  data () {
     return {
         local: null
    }
 }
}
</script>