Reactive object setting. Should this be necessary?

[BigBlueHat]

I've built a JSON renderer (of sorts) using petite-vue, but when I started refactoring it to use nested components the reactivity broke. I first removed object deconstruction from the components. I next tried dynamically updating the object key by key. I then found what was actually needed was to incorporate $nextTick because the data was successfully being updated and still within the Proxy, but the DOM updates just weren't populating without waiting.

The setData() method feels like it should be core (somehow) to a petite-vue project. It seems unavoidable if/when one doesn't know the shape of the JSON object being updated and therefore cannot update it a key at a time. But I'm very likely missing something obvious...

// partial code for explanation below...

function KeyValueComponent(obj) {
  return {
    $template: '#obj-renderer',
    obj
  }
}

createApp({
  // component
  KeyValueComponent,

  // data
  store: reactive({
    data: {} // the JSON object being rendered into HTML
  });

  // method for setting data without breaking reactivity
  setData(newData) {
    this.store.data = {};
    this.$nextTick(() => {
      this.store.data = newData;
    });
  }
});

[BigBlueHat]

I've checked StackOverflow and read through #43 #234 which informed the ultimate shape of what's above, fwiw.