How to handle UnwrapRefSimple in Vue composition api with TypeScript

When using reactive objects Vue composition api I get Typescript errors about UnwrapRefSimple<T>.
This seems specifically the case when using arrays inside ref().

An example.

interface Group<T> {
  name: string
  items: T[]
}

export function useSomething<T extends object>({ model }: { model: T }) {

  const groupsArray = ref([] as Group<T>[])

  const group = {
    name: 'someGroup',
    items: [model],
  }

  groupsArray.value.push(group) // <-- this line is the problem

  return {
    groups: groupsArray,
  }
}

The error I get is:

Argument of type '{ name: string; items: T[]; }' is not assignable to parameter of type '{ name: string; items: UnwrapRefSimple<T>[]; }'.
  Types of property 'items' are incompatible.
    Type 'T[]' is not assignable to type 'UnwrapRefSimple<T>[]'.
      Type 'T' is not assignable to type 'UnwrapRefSimple<T>'.
        Type 'object' is not assignable to type 'UnwrapRefSimple<T>'

I've tried things like adding UnwrapRef to the code:

import { UnwrapRefSimple } from "@vue/composition-api"
...
items: UnwrapRefSimple<T[]>

But then problems pop up elsewhere in the code and besides, this becomes difficule to read.
Does anyone know how to handle this nicely?

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum