Evgeny Kulakov

Обычным образом:
<comp :someObj="someObj" />

Может я не все понял, но какое-то странное использование...
Не проще вставить в шаблон модального окна слот и передавать туда нужный контент:

<template> // modal template
<div>
<slot></slot>
</div>
</template>

В родителе:

<template>
<modal>
  <custom-input></custom-input>
</modal>
</template>

Велосипед: https://jsfiddle.net/kulakoff/ve4k3v3t/

Только ручками, не хватает данных для связи объекта и массива.
Или в массив добавить id типа вот так: {id: "hair", label: 'Цвет волос', value: 'Блонд'} и далее:

datas.forEach(item => { item.value = obj[item.id] })

Нужно добавить входной параметр value в компонент, v-model его использует для установки значения:

props: {
         // ...
            value: {
                type: String,
                required: true
           }
}

input.form-group__field(:type='type' :id='name' :name='name' autocomplete='off' ref='field' @focus='onFocus()' @blur='onBlur()' @input='onInput()' :value="value")

https://learn.javascript.ru/task/array-unique (решение с объектом)

А в чем проблема, создавайте компоненты)

<div id='app'>
<arr-comp v-for="arrItem in arr" >
  <h1>{{arrItem.title}}</h1>
  <tag-comp v-for="tagItem in arrItem.tags">
     <h2>{{tagItem.title}}</h1>
     <element-comp v-for="elementItem in tagItem.elements">
        <h3>{{elementItem.title}}</h3>
     </element-comp>
  </tag-comp>
</arr-comp>
</div>

Шаблон каждого компонента должен иметь примерно следующий вид:

<template>
<div>
<slot></slot>
</div>
</template>

ps. Экземпляров может быть сколько угодно

Согласен, отдельные vue файлы лучший вариант. Другие варианты я бы выбирал только, если вы не можете использовать сборщик по каким-то причинам.

Объект от родителя к потомку передается по ссылке, если вы не создаете в родителе объект каждый раз заново, то потомок скорее всего просто не видит изменений.
Варианты:
1. Пересоздавать объект
2. Попробовать в потомке использовать deep watch за объектом:

watch: {
      propsObject: {
        deep: true,
        handler(new, old) {
          // your code
        }
      }
    }

Нормальная практика пробрасывать событие наверх от своего компонента, если родитель в нем нуждается. Это есть ваш интерфейс компонента при его взаимодействии с внешним миром.

<input type="text" class="form-control" @input="$emit('input', $event)">

// child template
<template>
<ul>
<slot></slot>
</ul>
</template>

<parent>
<child>
  <granchild  v-for="item in items"></grandchild>
</child>
</parent>

Скорее всего у вас в вэбпаке алиас имеется типа вот такого:

alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src')
    }

соответственно, когда вы импорт делаете такого модуля, вебпак заменяет путь на путь из алиаса.
Решение - поменять алиас.

Чисто vue решение:
Создаете json файл со списком шагов, полей, описываете в нем логику переходов.
При заходе на страницу, получаете этот файл, парсите, строите поля, прогрессбар и т.д.
Тут надо быть готовым к перезагрузке страницы, и возможно, сохранять промежуточные данные в localstorage например.

1. Есть готовые либы, например: https://github.com/monterail/vuelidate
2. Можно обернуть инпут в ваш кастомный компонент, в который вы будете передавать функцию валидации

По-второму вопросу как вариант:

computed: {
  isBicValid() {
        return this.bank_bic.length > 0 ? /^[0-9]{9}$/.test(this.bank_bic) : true
    }
},