VueJS - Parsing error: Unexpected token as. while specifying types inside template

Question

I have an enum inside my Vue <script> tags. I'm trying to access the enums using a variable inside the <template>.

But doing so gives me this compilation error.

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

I tried to get rid of this error using the approach as mentioned in this answer here

But what I observed is we cannot typecast inside the <template> tags.

When I try to typecast, I get the following error. Parsing error: Unexpected token as

Here's the code.

<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>

Thanks in advance.