Typescript, CSSStyleDeclaration and StyleValue

[FragsterAt]

It takes too many words to describe the problem, but I have poor english.

The playground shows the problem: https://play.vuejs.org/#eNqlVE1v2zAM/SuELnGAzMGynQInwNb2sB3WYil2qXpQbSZVKkuGJGcJDP/3UXLjuEPRD/Rki3x8fBRJNexbVaW7GtmcZS63svLg0NcVKKE3C86842zJtSwrYz00YHE9gdyUVe2xmMDKHxT+EapGaGFtTQkjIhtxzbU/VAiXd9tr+n6GBTRcA2hR4pyirNSbSTC4QDCHK2G9FCo7W60i5TnmSljhpdGUvf2fb/Ya30lXjM6Ndh7WUnm0T0NHpLUHFMKLIJWKzI7Kb26Xyc3teAgJ2QeQWQ/hOjKku5A4rWp3nwxTmbvtaCiyyY0ylhwbi6hHJKPtSWbvJrFYnCiGBWNxHlQt+rYlyRgWy67axzQdMpHBLtOQKpU6V3WBLul80Tge9xcx5J49y30s4T3cXGfTbgyp7XTwWFZKeKRTB51DJjVlgt2n0hSoaEQHHDSr2TT6u/BC7gi4NpZgkrgmIEHqp/fCGcwf8BAQ4Tde6yM8jQcibRqI55AD2jabEvGbM8w+lCHcyOAW2IRWkjqwlpt064ymvY3TwVnogFRoL6uwNbS2NBvBE3xCKfP3Z7R5W2Ocnxhzj/nDM/at2wcbZ1cWHdodKex9XtgN+s59sfqFe/rvndSTOtTzgvM3OqPqoLGDfa91QbIHuKj2R3xxaK2v3cXeo3bHooLQgGwjnjN6b85eKP0k90v6NcbRjrD2H5xdsuQ=

filteredData2 has error Type instantiation is excessively deep and possibly
filteredData1 has error in template Argument of type '{ style: { [x: number]: string; accentColor?: string; alignContent?: string; alignItems?: string; alignSelf?: string; alignmentBaseline?: string; all?: string; animation?: string; animationComposition?: string; ... 506 more ...; [Symbol.iterator]?: () => ArrayIterator<string>; }; key: number; }' is not assignable to parameter of type 'HTMLAttributes & ReservedProps & Record<string, unknown>'.

Also data2 items haven't intellisense, but it isnt the main problem.

How can I use style values without having typescript errors?