Ошибка при наследовании интерфейсов в vue3 + TS

Начал изучать vue3 + ts и наткнулся на такую проблему: создаю 2 интерфейса, один наследуется от другого. И определяю входные параметры.

<script setup lang="ts">
  interface ITest {
    test: string
  }
  interface IProps extends ITest {
    text: string
  }

  const props = defineProps<IProps>()
  console.log(props.text)
  console.log(props.test)
</script>

Сам компонент :

<nav-link
   text="текст1"
   test="текст2"
/>

При таком раскладе в консоль будет выведено: "текст1" "undefined" при этом у компонента в инспекторе кода появится атрибут "test="текст2""

Если же интерфейс определить как

      interface ITest {
        test: string
      }
      interface IProps {
        test: ITest
        text: string
      }

то все заработает. Подскажите, как правильно унаследовать интерфейс? Впринципе можно оставить и второй вариант как решение, но писать каждый раз props.test... муторно + что-то мне подсказывает, что я где-то делаю не то