VueJS 3 - make reactive aware of new object properties - vue.js

Question

There's a similar question here, but for Vue2. The solution, use Vue.set, is not valid in Vue3. I'm getting a lot of results about Vue2, but nothing about Vue3 for this yet.
There's a lot of fanciness going on in the code, but it's really quite moot. My object lives in a state in the vuex store. It has a non-enumerable property that is a function that adds records to itself like so:
class myObject extends Object {
constructor(){
this.add = function(id){
isReactive(this) //=== true, because vuex
this[id] = new myOtherObject(data);
}
}
}
Question:
Is there a way to force the reactive wrapping this object to know it's had these properties added?
There are other work arounds to my problem, one of which I've implemented, and is basically to include some other thing in the computed so it knows it's time to update itself. Luckily, I have a non-enumerable length property on my object that is incremented when a property is added that works perfectly:
const record = computed(() => {
store.state.myData.myObject.length; //<- literally just an incremented ref
return store.state.myData.myObject; //<- the problem child
});
But this is weird and hacky, and feels very anti-pattern.
Example code:
class myOtherObject extends Object {};
class myObject extends Object {
constructor(){
super();
this.add = function(id){
console.log(`Added: ${id}`);
this[id] = new myOtherObject();
}
}
}
const store = Vuex.createStore({
state: function(){
return {
myData: {
test1: new myObject()
}
}
}
});
const record = Vue.computed(() => {
console.log("This isn't happening when new props are added");
return store.state.myData.test1; //<- the problem child
});
for (var i = 0; i < 100; ++i){
store.state.myData.test1.add(i);
}
console.log(store.state.myData.test1);
<script src="https://unpkg.com/vue#3.2.30/dist/vue.global.js"></script>
<script src="https://unpkg.com/vuex#4.0.2/dist/vuex.global.js"></script>