How to handle Typescript class instances as props?

[mitjans]

Hi! Yesterday I asked a question on r/vuejs, and would like to share it with you as well.

Situation:

• You are given a third party library (which you can't modify) with a simple LinkedList implementation represented as a Typescript class.
• You want to create 2 Vue compoments:
  • The parent will modify a linked list
  • The child will have the first linked list node as a prop

I've noticed that the first node passed as a prop to the child component won't be reactive to new nodes being appended at the end of the list. I've managed to overcome this problem passing a new "dummy" prop to the child that changes everytime a new node is appended (this change triggers Vue reactivity system and forces an update on the child component).

On this example, removing the `force` property on the child component will brake the reactivity. The child won't be notified when new nodes are appended on the list.

Is there a more elegant way of handling situations like this?

Some links with more information on this:

• Typescript: Private fields in classes on data properties cause failed type verification since 3.0.8 #3815
• Common problems with reactivity docs#849 (comment)
• Triggering a ref passed as a prop does not cause an update in the nested component #7614
• [@vue/reactivity][typing] Unwrapping breaks classes with private fields. #2981

---

Someone suggested using a customRef wrapper. Although I like the idea of creating a wrapper, I don't see how it could be done in the example provided.

I've also tried using a shallowRef and trigger a reactivity change with triggerRef, but the reactivity change only affects the parent component. In this Github comment, there's an example of this.