0xD34F

str.match(/\w+=(".*?"|\S*)/g)

Состояние компонента должно содержать три значения - индекс печатаемой строки, количество отображаемых символов, направление печати (печатаем или стираем, т.е., в какую сторону надо изменять количество отображаемых символов, увеличивать или уменьшать). Дальше понятно что - setInterval или рекурсивный setTimeout, изменяем количество отображаемых символов, если дошли до конца строки - меняем направление, дошли до начала - меняем направление и индекс строки. Вот как-то так:

const defaults = {
  index: 0,
  length: 0,
  step: 1,
};

function Typewriter({ strings, delay }) {
  const [ state, setState ] = useState(null);

  useEffect(() => {
    setState(() => ({...defaults}));
  }, [ strings ]);

  useEffect(() => {
    const timeoutId = setTimeout(setState, delay, ({...state}) => {
      state.length += state.step;
      if (state.length === strings[state.index].length) {
        state.step = -1;
      } else if (state.length === 0) {
        state.step = 1;
        state.index = (state.index + 1) % strings.length;
      }
      return state;
    });

    return () => clearTimeout(timeoutId);
  });

  return <div>{strings?.[state?.index]?.slice(0, state?.length)}</div>;
}

работает, но кажется, что достаточно криво

Да, криво - всегда перебирается весь массив.

Можно идти от конца к началу до тех пор, пока не встретится подходящий элемент:

let lvl = 0;

for (let i = LVLS.length; i--; ) {
  if (LVLS[i].exp <= EXP) {
    lvl = LVLS[i].lv;
    break;
  }
}

переделать это во что-то более красивое

const lvl = LVLS.findLast(n => n.exp <= EXP)?.lv ?? 0;

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

const LVLS = [ 10, 25, 45, 70, 100 ];

const lvl = 1 + LVLS.findLastIndex(n => n <= EXP);

Не надо никаких v-model, кого показывать в модальном окне - отправляйте наверх эту информацию вместе с событием. Свойство, управляющее видимостью модального окна - пусть оно вместо логического значения хранит id или объект или что там у вас должно показываться в окне, если не null, значит открываем окно. Вот так всё просто.

UPD. Вот вариант с v-model, конечно только на уровне таблицы, в строках всё по-прежнему.

UPD. А вообще, можно полностью отказаться от прокидывания событий наверх. Таблицу исполняем в более общем виде - пусть принимает массив с описанием столбцов, а содержимое ячеек задаётся через слоты, имена которых определяются на основе имён столбцов (по умолчанию выводят данных как есть). В этом случае кнопку можно определить там же, где создаётся экземпляр таблицы. Как это может выглядеть - ваш вариант с отдельным компонентом строки (и, соответственно, прокидыванием в него слотов из компонента таблицы), или, без ненужного усложнения.

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]"

Откуда вы взяли, что функция должна что-то возвращать? Судя по названию - не должна. Вместо собирания и возврата строки сразу печатайте отдельные результаты. Ну или оставьте собирание строки и вместо 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 newArr2 = arr2.map(n => ({ ...obj1[n.name], ...n }));

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

arr2.forEach(n => {
  const obj = obj1[n.name];
  if (obj) {
    n.id = obj.id;
  }
});

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));
  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('&');
}

вот так

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

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>

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