Динамическое изображение не загружается через: src

Я работаю над простым приложением Vue, используя для этой цели vue-cli и webpack.

Итак, в основном у меня есть 2 компонента, родительский и дочерний компонент ~

нравится:

<template>
  <div class = "triPeaks__wrapper">
    <div class = "triPeaks">
      <tri-tower class = "tower"></tri-tower>
      <tri-tower class = "tower"></tri-tower>
      <tri-tower class = "tower"></tri-tower>
    </div>
    <div class = "triPeaks__line">
      <tower-line :towerLine = "towerLineCards" />
    </div>
    <tri-pack />
  </div>
</template>

TowerLineCards - это важная вещь там, это опора, которая передается компоненту tower-line, в основном это массив из 10 элементов, это массив с 10 номерами, которые перемешиваются, так что это может быть что-то вроде этого:

[1,5,2,6,8,9,16,25,40,32]

этот массив создается с помощью beforeMount в жизненном цикле.

В дочернем компоненте:

<template>
  <div class = "towerLine-wrapper">
    <div class = "towerLine">
      <img v-for = "index in 10" :key = "index" class = "towerLine__image" :src = "getImage(index)" alt = "">
    </div>
  </div>
</template>

<script>
export default {
  props: {
    towerLine: {
      type: Array,
      required: true
    }
  },
  method: {
    getImage (index) {
      return '@/assets/images/cards/1.png'
    }
  }
}
</script>

<style lang = "scss">
  .towerLine {
    display: flex;
    position: relative;
    top: -90px;
    left: -40px;

    &__image {
      width: 80px;
      height: 100px;

      &:not(:first-child) {
        margin-left: 3px;
      }
    }
  }
</style>

проблема связана с изображением: src, которое я возвращаю через getImage (), поэтому он не работает. Если я перейду на src, он будет работать нормально, я сделал это просто для проверки, потому что число в пути должно быть динамическим, когда я заставлю это работать.

Что плохого в таком подходе? любая помощь?

Спасибо