In order to extract the data handling from the component you would usually use a state manager like Vuex or Pinia, this is the most popular approach across the community;

a much more simple option (reduces the amount of boilerplate code) is using a singleton class to store data and functions (similar to angular services approach to the problem).

There clearly is a problem on how reactive triggers DOM's and there's not much on the documentation about how reactive gets involved in components lifecycle.