Question about correct Vue application architecture. I need to pass some logic to the component. In this case, it is recommended to use a composable function:

const useMyLogic = () => {
  const propA = ref(1);
  const fn = (val) => val * 2;
  return { propA, fn };
};

What is the technical and architectural difference between this approach and using a class?

class MyObject {
  propA: ref(1);
  fn: (val) => val * 2;
}
const getMyObject = () => new MyObject();

When the component calls getMyObject, doesn’t it get the same thing as when useMyLogic? And there are more possibilities to interact with the component from outside.

PS: I see that my question is being actively rejected. Dear experts, please be more tolerant, explain to the newcomer what he does not understand.