Wywołanie funkcji w <template> przy złym typie argumentu

Witam, poniżej umieszczam mały kawałek kodu na którym uczę się TypeScripta. Zauważyłem, że edytor podkreśla mi na czerwoną linią kiedy chcę wywołać funkcję z błędnym typem argumentu ale np. wewnątrz template <button @click="changeCarName(25)">Change to RS model!</button> wywoluje funkcję changeCarName(25) gdzie przesyłam liczbę 25 i nie dostaję żadnej informacji o tym, że argument nie jest typu string. Nawet konsola w przeglądarce nie daje komunikatu. Może TypeScript nie działa z template w vue?

<script lang="ts">
import { defineComponent, ref } from "vue";

export default defineComponent({
  setup() {
    const carName = ref<string>("Skoda Superb");

    const changeCarName = (name: string) => {
        carName.value = name;
    }

    return { carName, changeCarName };
  },
});
</script>

<template>
  <div class="card">
    <h1>{{ carName }}</h1>
    <h1>Hello my lovely car!!!</h1>
    <button @click="changeCarName(25)">Change to RS model!</button>
  </div>
</template>

<style>
.card {
  background-color: blanchedalmond;
  padding: 5px;
}
</style>

Wygląda jak by z automatu parsowało na stringa.

udało mi się znaleźć rozwiązanie, trzeba mieć zainstalowany dodatek Vetur i później w ustawieniach -> "Veture template"
zaznaczyć:

Niestety zawartość template lepiej dodatkowo samemu sprawdzać i pilnować.

Vetur nie jest już zalecanym toolingiem do vue w VS Code. Użyj rozszerzenia Volar.