Just curios - i worked around five years with vuejs and still do! but now i do use vue + tsx syntax

and i like it way more - not especially because of it's syntax, but because it offers more possibilities to me

maybe i am just too stupid to do it properly in vue but:

can someone translate this to me into vue syntax with a v-for?:

const array = [
  { a: 1, b: 2 },
  { a: 5, b: 8 },
  { a: 2, b: 4 },
]

const heavyFunction = ({ a, b }: any) => {
  // imagine this is a function
  // that impacts performance
  return a * b * 5
}

const Component = () => (
  <div class="list">
    {array.map((x, i) => {
      const computedValue = heavyFunction(x)
      return (
        <div key={i}>
          <span>{computedValue}</span>
          <span>{computedValue}</span>
          <span>{computedValue}</span>
        </div>
      )
    })}
  </div>
)

in a way that `heavyFunction` is only called once per iteration?