How do I create a reactive data class in Vue.js?

I have some JSON objects passed from an API server like: {"id": 4, "name": "foo", "bar": {"key1": "value1", "key2": "value2"}}

I want to wrap this object with a Javascript class so I can handle the JSON change easily (It's under development and change from time to time). It's a very basic OOP: Wrap the data, then use setters and getters:

export default class Issue {
  constructor(json) {
    this.data = json
  }
  getId() {
    return this.data.id
  }
  isOpen() {
    return this.data.status.id !== 6
  }
  ...
}

But in Vue.js I don't know how to do this while keeping it reactively. For example, in a component I have

data: () => {
  return {
    issues: []
  }
}

Then for (const json of jsons) { this.issues.push(json) } will be reactive, but for (const json of jsons) { this.issues.push(new Issue(json)) } will be not, right?

I think my ideal is that I can use Component as a data class, but I don't know how to new a component, and is it effective to use Components as data classes.

What should I do?