typescript - VueJS - Parsefel: Ov väntat tecken 'as' vid angivande av typer inuti mall

Jag har en enum inuti mina Vue <script>-taggar. Jag försöker komma åt enumeren med en variabel inuti <template>.

Men att göra det ger mig detta kompilationsfel.

Element implicitly has an 'any' type because expression of type 'any' can't be used to index type 'typeof responses'

Jag försökte bli av med detta fel genom att använda metoden som nämns i detta svar här

Men det jag observerade är att vi inte kan typa om inuti <template>-taggarna.

När jag försöker typbestämma får jag följande fel. Parsing error: Unexpected token as

Här är koden.

<template>
  <div>
    <p> {{ directions[directionName as keyof typeof directions] }} </p>
  </div>
</template>
<script lang="ts">
export default defineComponent({
  props: ["directionName"],
  setup(){
    enum directions {
      NORTH = "North",
      WEST= "West",
      EAST= "East",
      SOUTH= "South",
    }
    return {
      directions,
    }
  }
})
</script>

Tack i förväg.