Type '{ flexDirection: string; }' is not assignable to type 'StyleValue'

[robustNan]

Vue version

3.2.4

Link to minimal reproduction

https://sfc.vuejs.org/#__DEV__eNp9j81OwzAQhF9l8cUgNTEUTlFaFYkDb8DFl5JsW0P8o7VTqCK/O5sGUFskTvbMrPfzDOIxhHLfo6hEHRsyIUHE1IeldsYGTwkGINxAhg15C5JHpXbaNd7FBDZuYTHm1/IZu87Di6euvZI32tVqWseLWCS0oVsnZAVQt2YPVUyHDhdaDK2JnB0qkJsOP+UMxuPJEDbJeMc2+Q+ZtTi+5de7u+UwHNE514rVjz8/8+cTSzGMb7X6/YKYialaYdehfIvecflhHNbfQdSigqMzelx51FrsUgqxUqp34X1bNt6qFWeKepeMxaL1dnVfzsuHW2bGdOqXGG3xyj0iEhO1mJ0sV2zukQpC1yIh/Qu7mD0DXmR/oCMza5dF/gKjw6sl

Steps to reproduce

Set style using attribute binding:
:style="{
...
flexDirection: 'row' | 'column',
...
}"

What is expected?

No error

What is actually happening?

Type '{ flexDirection: string; }' is not assignable to type 'StyleValue'

System Info

No response

Any additional comments?

No response

[LinusBorg]

• The Playground doesn't show Type information so it's not suited to reproduce the supposed issue.
• The reproduction steps are not clear.
• It's not clear when and by what the error is being raised - Volar in the IDE? running vue-tsc? Vue CLI?

Please provide a fully runnable reproduction demonstrating the problem.

as a hint: maybe all you need is as const?

<div :style="{display: 'flex', flexDirection: 'row'} as const">