has anyone tried to use vue component as a property inside another component i.e

import SomeComponent from "../"

export default class ParentComponent extends Vue {

 public someComponent: SomeComponent = new SomeComponent({ propsData: {someProp: 123} })


 public async created(){
  await this.someComponent.loadData();
 }

 public beforeDestroy(){
  this.someComponent.$destroy();
 }
  
}

And use it in template like so:

<template>
 <ul>
  <li v-for="item in someComponent.items">
   {{item.name}}
  </li>
 </ul>
</template>

From what I noticed other than that I have to pass parent i.e new SomeComponent({parent: this, propsData: ..) and calling this.someComponent.$destroy at beforeDestroy it does seem to work fine.

Update:

I forgot to mention, the idea popped out as a replacement of mixins as I really don't like the drawbacks of mixins. Property and method name collisions and you don't know where a field is coming especially if you have 2-3 mixins. Vue 3 does fix all this and I know I can use reactive, ref etc just like in Vue 3 using a library in Vue 2 but the idea was making it to work without a libraray. I am open to suggestions if anyone knows a neat way reusing code and keeping the reactivity. This is a POC for the company I work.

Thanks you all :)