Функция
require,
очевидно, исполняется* во время создания(декларации) экспортируемого объекта,
задолго до того как этот
объект попадёт в Vue и превратится в
Vue-компонент.
Функция
require,
очевидно, исполняется в глобальном контексте, в котором недоступен (какой-либо)
this.
Нормальное решение вашей проблемы выглядит примерно так.
<template>
<div>
<component :is="SvgView" class="sp-svg-styles"/>
</div>
</template>
<script>
export default{
props:['name'],
computed: {
SvgView() {
return require('./../Icons/'+this.name+'.svg');
}
}
}
</script>
*
require на самом деле работает на этапе компиляции, подготавливая и загружая в бандл
все файлы по маске
./../Icons/*.svg, а на этапе исполнения заменяется внутренней функцией, возвращающей значение по имени.
