0xD34F

const addCard = (cardName) => {
  cards.value.push({
    id: Date.now(),
    component: cardName,
    order: cards.value.length + 1,
    isRequired: false
  })
}

Что такое cardName? Не то, что вам, судя по имени параметра, кажется. Это не имя, а сам объект компонента. И вы его потом в localStorage засовываете. Так что методы setup и render теряются.

Сложите компоненты в объект:

const components = {
  ShortTextCard,
  LongTextCard,
  SingleQuestionCard,
  MultiQuestionCard,
};

Передавайте в addCard их имена:

- @click="addCard(ShortTextCard)"
+ @click="addCard('ShortTextCard')"

Когда надо экземпляр компонента создать, доставайте объект компонента по его имени из упомянутого выше объекта:

- :is="card.component"
+ :is="components[card.component]"

Лучше никак.

Так что сперва о том, как надо. Вместо вкладок используем меню - оно умеет работать с роутером:

<el-menu mode="horizontal" router :default-active="$route.name">
  <el-menu-item
    v-for="n in $router.getRoutes()"
    v-text="n.name"
    :index="n.name"
    :route="n"
  />
</el-menu>
<router-view />

Ну а вкладки... Делаем вычисляемое свойство, представляющее активный маршрут, геттер - возвращает имя, сеттер - по имени выполняет переход:

computed: {
  activeRouteName: {
    get() {
      return this.$route.name;
    },
    set(name) {
      this.$router.push({ name });
    },
  },
},

Используем это свойство для управления вкладками. Контент у всех вкладок одинаковый - <router-view>, но рендерить будем его только в активной вкладке. Вот такой получается говнокод:

<el-tabs v-model="activeRouteName">
  <el-tab-pane v-for="{ name: n } in $router.getRoutes()" :label="n" :name="n">
    <router-view v-if="activeRouteName === n" />
  </el-tab-pane>
</el-tabs>

Откуда вы взяли, что функция должна что-то возвращать? Судя по названию - не должна. Вместо собирания и возврата строки сразу печатайте отдельные результаты. Ну или оставьте собирание строки и вместо return сделайте print.

handleEdit(row){

@click="handleEdit(scope.$index, scope.row)"

Сколько параметров получает метод handleEdit? А сколько передаёте ему в обработчике клика? Устраните это печальное несоответствие.

path:'/protocol_information/:id/edit/',
params:{
    id:row.id
}

Вместо path должен быть name. Конечно, если таковой указан при определении маршрута.

Или, вырезаете params и вставляете нужный id сразу в строку:

path: `/protocol_information/${row.id}/edit/`,

Сначала из первого массива сделаем объект, где значениями будут его элементы, а ключами - значения их, элементов, свойства name:

const obj1 = Object.fromEntries(arr1.map(n => [ n.name, n ]));

// или

const obj1 = arr1.reduce((acc, n) => (acc[n.name] = n, acc), {});

Затем можно собрать новый массив:

const newArr2 = arr2.map(n => ({ ...obj1[n.name], ...n }));

// или

const newArr2 = [];
for (let i = 0; i < arr2.length; i++) {
  newArr2.push(Object.assign({}, obj1[arr2[i].name], arr2[i]));
}

Или обновить существующий:

arr2.forEach(n => Object
  .entries(obj1[n.name] ?? {})
  .forEach(([ k, v ]) => Object.hasOwn(n, k) || (n[k] = v))
);

// или

for (const n of arr2) {
  const obj = obj1[n.name];
  for (const k in obj) {
    if (!n.hasOwnProperty(k)) {
      n[k] = obj[k];
    }
  }
}

UPD. Вынесено из комментариев:

можно ли исключить объекты у которых не изменился value? То есть что бы этих объектов не было в итоговом массиве.

const newArr2 = arr2.reduce((acc, n) => (
  obj1[n.name]?.value !== n.value && acc.push({ ...obj1[n.name], ...n }),
  acc
), []);

Отключаем чекбоксы, изменение состояния которых нежелательно:

function restrictChecked({
  container,
  selector = 'input[type="checkbox"]',
  min = 0,
  max = Infinity,
  enableOnCancel = true,
}) {
  const checkboxes = [...container.querySelectorAll(selector)];
  const onChange = () => {
    const countChecked = checkboxes.reduce((acc, n) => acc + n.checked, 0);
    const minReached = countChecked <= min;
    const maxReached = countChecked >= max;
    checkboxes.forEach(n => n.disabled = minReached && n.checked || maxReached && !n.checked);
  };

  checkboxes.forEach(n => n.addEventListener('change', onChange));
  onChange();

  return () => checkboxes.forEach(n => {
    n.disabled &&= !enableOnCancel;
    n.removeEventListener('change', onChange);
  });
}

Или, откатываем нежелательные изменения:

function restrictChecked({
  container,
  selector = 'input[type="checkbox"]',
  min = 0,
  max = Infinity,
}) {
  function onChange({ target: t }) {
    if (t.matches(selector)) {
      const countChecked = this.querySelectorAll(`${selector}:checked`).length;
      t.checked ||= countChecked <  min;
      t.checked &&= countChecked <= max;
    }
  }

  container.addEventListener('change', onChange);

  return () => container.removeEventListener('change', onChange);
}

Снизу вверх изменения отслеживаются, а сверху вниз - нет, состояние дочерних компонентов никак не зависит от родителя.

Вырезать обработчики события change и, соответственно, методы filtered; свойства currentPriority и currentStopsId сделать вычисляемыми - геттеры возвращают значение параметра, сеттеры отправляют новое значение родителю:

currentPriority: {
  get() {
    return this.filterPriorities;
  },
  set(val) {
    this.$emit('update:filterPriorities', val);
  },
},

currentStopsId: {
  get() {
    return this.filterStops;
  },
  set(val) {
    this.$emit('update:filterStops', val);
  },
},

По количеству пользователей, которые на вопрос подписались. Так мне кажется.

Функции добавить параметр - глубину вложенности.

Проверяем, чем является значение, если не объект, то возвращаем как есть. Иначе собираем новый объект, в который записываем текущую глубину вложенности и свойства исходного объекта, обработав их значения функцией - делаем рекурсивный вызов с глубиной вложенности, увеличенной на единицу:

const addDepth = (val, depth = 0) =>
  val instanceof Object
    ? Object.entries(val).reduce((acc, n) => (
        acc[n[0]] = addDepth(n[1], depth + 1),
        acc
      ), { depth })
    : val;

Погуглил за вас:

https://element-plus.org/en-US/component/tree.html
https://primevue.org/tree/
https://www.ag-grid.com/vue-data-grid/filter-set-t...
https://quasar.dev/vue-components/tree/
https://antdv.com/components/tree
https://ui.vuestic.dev/ui-elements/tree-view

Рекурсия есть:

const toString = (val, keys = []) =>
  val instanceof Object
    ? Object.entries(val).map(([ k, v ]) => {
        keys.push(k);
        const result = toString(v, keys);
        keys.pop();
        return result;
      }).join('&')
    : `${keys.join('.')}=${val}`;

Рекурсии нет:

function toString(val) {
  const result = [];

  for (const stack = [ [ val, [] ] ]; stack.length;) {
    const [ n, keys ] = stack.pop();
    if (n instanceof Object) {
      stack.push(...Object.entries(n).map(([ k, v ]) => [ v, [ ...keys, k ] ]).reverse());
    } else {
      result.push(`${keys.join('.')}=${n}`);
    }
  }

  return result.join('&');
}

вот так

v-for="(address, i) in form.addresses_to" :key="i"

всегда удаляется последний

Конечно последний. Индекс в качестве ключа - хуже, чем ничего. Индекс ключом быть не может, думаете, что ключи есть, а на самом деле их нет. А если ключей нет, то

Vue использует алгоритм, который минимизирует перемещение элементов

Т.е., было в массиве N значений, на основе которых создано N элементов. Одно значение из массива выкидывается, значит, и элементов должно остаться N - 1. Какой удалить проще всего? - последний, не надо будет перемещать элементы, расположенные за ним.

Сделайте нормальные ключи - добавьте объектам address свойства id, имеющие уникальные значения, и используйте их в качестве ключей.

Метаданные формы - массив объектов, содержащих имя поля, имя компонента, с которым будет взаимодействовать пользователь, объект параметров для компонента:

const formMeta = ref([
  {
    name: '...',
    component: '...',
    props: { ... },
  },
  ...
]);

Данные формы - объект, в качестве ключей будут выступать значения свойств name элементов formMeta. Изначально можно сделать пустым: const formData = ref({});. Можно явно задать начальные значения:

const formData = ref({
  имяПоля1: значение1,
  имяПоля2: значение2,
  ...
});

Или есть вариант доставать ключи и дефолтные значения из метаданных:

const formData = ref(Object.fromEntries(formMeta.value.map(n => [
  n.name,
  n.defaultValue ?? null,
])));

На основе formMeta создаётся форма, через v-model свойства formData связываются с экземплярами компонентов:

<form>
  <div v-for="n in formMeta">
    <component
      :is="components[n.component]"
      v-model="formData[n.name]"
      v-bind="n.props"
    />
  </div>
</form>

Вот как-то так.

Не возвращаете результат рекурсивного вызова - где return перед gen_nums(stop_n, number)?

А вообще, какого хрена последнее число, в отличие от остальных, не выводится самой функцией? Давайте избавимся от этой шизофрении:

def gen_nums(max_num, num):
  if num <= max_num:
    print(num)
    gen_nums(max_num, num + 1)

# или

def gen_nums(num):
  if num >= 1:
    gen_nums(num - 1)
    print(num)

Засовываем в массив пары из регулярного выражения, с помощью которого из строки достаётся число перед единицей измерения, и эквивалентного данной единице измерения количества секунд; оббегаем этот массив, выдёргиваем числа, умножаем их на количество секунд, складываем:

const units = [
  [ 'де?н', 24 * 60 * 60 ],
  [  'час',      60 * 60 ],
  [  'мин',           60 ],
  [  'сек',            1 ],
].map(n => [ RegExp(`\\d+(?=\\s+${n[0]})`), n[1] ]);

const getSeconds = str =>
  units.reduce((acc, n) => acc + n[0].exec(str) * n[1], 0);

getSeconds('2 часа 22 секунды') // 7222
getSeconds('99 минут') // 5940
getSeconds('1 час 1 минута 1 секунда') // 3661
getSeconds('1 день 23 часа 59 минут 60 секунд') // 172800
getSeconds('2 дня') // 172800
getSeconds('546 секунд и ещё 2 минуты') // 666

Если вдруг возможно повторение единиц измерения внутри одной строки, то поиск с помощью регулярных выражений должен быть глобальным - RegExp(`\\d+(?=\\s+${n[0]})`, 'g'), а функция подсчёта секунд примет следующий вид:

const getSeconds = str =>
  units.reduce((seconds, [ reg, multiplier ]) => {
    return [...str.matchAll(reg)].reduce((acc, n) => acc + n * multiplier, seconds);
  }, 0);

// или

const getSeconds = str => units
  .flatMap(n => (str.match(n[0]) ?? []).map(m => m * n[1]))
  .reduce((acc, n) => acc + n, 0);

// или

const getSeconds = str => eval(units
  .map(n => `${n[1]} * (${str.match(n[0])?.join('+') ?? 0})`)
  .join('+')
);

getSeconds('1 секунда плюс 3 секунды плюс 5 секунд') // 9
getSeconds('21 день, 7 дней, да ещё 3 дня - всего секунд в мае месяце будет') // 2678400

Если количество уровней вложенности невелико и известно заранее, то... Для обработки каждого уровня вложенности используется отдельный <template v-for, ячейки с rowspan'ами создаются в зависимости от равенства индексов элементов вложенных массивов нулю, значения rowspan'ов - длины (суммы длин) вложенных массивов. Например:

const rowspan = item => item.backlinks.reduce((acc, n) => acc + n.recipients.length, 0);

<tbody>
  <template v-for="item in data">
    <template v-for="(backlink, iBacklink) in item.backlinks">
      <template v-for="(recipient, iRecipient) in backlink.recipients">
        <tr>
          <template v-if="!iBacklink && !iRecipient">
            <td :rowspan="rowspan(item)">{{ item.name }}</td>
            <td :rowspan="rowspan(item)">{{ item['domain score'] }}</td>
          </template>
          <template v-if="!iRecipient">
            <td :rowspan="backlink.recipients.length">{{ backlink.donor }}</td>
            <td :rowspan="backlink.recipients.length">{{ backlink['page score'] }}</td>
          </template>
          <td>{{ recipient.url }}</td>
          <td>{{ recipient.image }}</td>
        </tr>
      </template>
    </template>
  </template>
</tbody>

Более универсальное решение - собрать из вложенных данных плоские, дополнив их значениями rowspan. Понадобится массив ключей и рекурсивная функция, принимающая массив данных, массив ключей, и индекс, начиная с которого надо обрабатывать ключи. Бежим по массиву данных, вложенный цикл по ключам - если значение, соответствующее текущему ключу, не является массивом, то оно помещается в массив данных строки, в противном случае следует рекурсивный вызов, после которого элементам массива данных строки добавляется значение rowspan, равное размеру результата рекурсивного вызова:

const keys = ref([
  'name', 'domain score', 'backlinks',
  'donor', 'page score', 'recipients', 
  'url', 'image',
]);

function createTableData(arr, keys, iKey = 0) {
  return arr.flatMap(n => {
    const row = [];
    const innerRows = [];

    for (let i = iKey; i < keys.length; i++) {
      const val = n[keys[i]];
      if (Array.isArray(val)) {
        innerRows.push(...createTableData(val, keys, i + 1));
        row.forEach(cell => cell.rowspan = innerRows.length);
        row.push(...innerRows.shift());
        break;
      } else {
        row.push({ text: val });
      }
    }

    return [ row, ...innerRows ];
  });
}

Преобразование вложенных данных в плоские можно оформить в виде вычисляемого свойства:

const tableData = computed(() => {
  return createTableData(props.data, props.keys);
});

Ну а построить таблицу на основе плоского массива - дело тривиальное:

<tbody>
  <tr v-for="row in tableData">
    <td
      v-for="cell in row"
      v-text="cell.text"
      :rowspan="cell.rowspan"
    ></td>
  </tr>
</tbody>

Рекурсивный компонент. Проверяем, является ли переданное значение объектом. Если нет - отображаем его. Если да - бежим по его свойствам, под каждое создаём по экземпляру компонента. Например, так.

Надо запоминать индекс кликнутого li.

const defaultEdit = {
  index: -1,
  value: '',
};

function App() {
  const [ notes, setNotes ] = useState([...'12345']);
  const [ edit, setEdit ] = useState(defaultEdit);

  const onClick = ({ currentTarget: { dataset: { index } } }) =>
    setEdit({ index: +index, value: notes[index] });

  const onChange = ({ target: { value } }) =>
    setEdit(edit => ({ ...edit, value }));

  const onBlur = () => {
    setNotes(notes => notes.map((n, i) => i === edit.index ? edit.value : n));
    setEdit(defaultEdit);
  };

  return (
    <div>
      <ul>{notes.map((n, i) => (
        <li data-index={i} onClick={onClick}>
          {n}
        </li>))}
      </ul>
      <input value={edit.value} onChange={onChange} onBlur={onBlur} />
    </div>
  );
}