0xD34F

re.findall(r'\d+\.\d{2}(?!\d)', text)

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

/\.(?=.*@)/g

Подскажите самые простые учебники / статьи / видео курсы по React, где нормальным языком доступно объясняется.

Документация.

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

Значит, рано за react взялись. Это ОЧЕНЬ простая вещь - конечно, для тех, кто готов её осваивать.

фразы оттуда навроде "Подъём состояния в родительский компонент — обычное дело при рефакторинге React-компонентов." лишь отпугивают новичков вроде меня

Вот это хорошо. Новичкам react ни к чему.

C javascript знаком на базовом уровне

Этого мало.

Чтобы выполнялись привязки обработчиков событий, атрибутов и т.д., вместо засовывания строки в v-html надо её компилировать как шаблон компонента, как-то так:

<component :is="getComponent(text)"></component>

methods: {
  getComponent(text) {
    return Object.assign(Vue.compile(`<div>${this.getMessageHtml(text)}</div>`), {
      methods: {
        // сюда пробрасываете нужный вам обработчик клика
      },
    });
  },
  ...

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

<div v-html="getMessageHtml(text)" @click="onClick"></div>

methods: {
  onClick(e) {
    if (e.target.tagName === 'BUTTON') {
      // убедились, что клик был по кнопке - теперь делайте чего там вам надо
    }
  },
  ...

document.addEventListener('click', e => {
  let t = e.target;
  for (; t !== document && !t.matches('.more-btn'); t = t.parentNode) ;
  for (const n of document.getElementsByClassName('more-btn')) {
    n.classList.toggle('active', n === t && !n.classList.contains('active'));
  }

  // или

  document.querySelectorAll('.more-btn').forEach(function(n) {
    n.classList[n === this ? 'toggle' : 'remove']('active');
  }, e.target.closest('.more-btn'));
});

li:first-child:hover ~ li:last-child {
  display: none;
}

Если нам нужно прокинуть данные от родителя к ребенку на сколь угодно глубокий уровень, мы можем воспользоваться provide/inject, а если нам надо в обратную сторону?

Точно так же. "Прокидывайте" с помощью provide метод компонента - "в обратную сторону" сведётся к его вызову.

function weightedRandom(arr, key = () => 1) {
  const val = key instanceof Function ? key : n => n[key];
  const max = arr.reduce((acc, n) => acc + val(n), 0);

  return () => {
    let rand = Math.random() * max;
    return arr.find(n => (rand -= val(n)) < 0);
  };
}

const getRandomPhotosArray = weightedRandom([
  [ 9,  truePhotos ],
  [ 1, funnyPhotos ],
], 0);

function getPhoto() {
  const photos = getRandomPhotosArray()[1];
  return photos[Math.random() * photos.length | 0];
}

Свойства formatter в настройках tooltip'ов:

new ApexCharts(..., {
  ...
  tooltip: {
    ...
    y: {
      title: {
        formatter: (seriesName, seriesData) => ...,
      },
      formatter: (value, seriesData) => ...,
    },
  },
});

Например.

from collections import Counter

count = Counter(a)
count.subtract(Counter(b))

result = sum(([ k ] * v for k, v in count.items()), [])

.page-message__text {
  white-space: pre;
}

Или, заменяете \n на <br>, а {{ }} на v-html.

<div class="tab" @click="$router.push('/')">

Заменить эту ерунду на router-link. Там добавление класса уже реализовано, осталось только стили ему прописать.

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

const getFromTree = (tree, childrenKey, getter = n => n) =>
  Array.isArray(tree)
    ? tree.flatMap(n => [
        getter(n),
        ...getFromTree(n[childrenKey], childrenKey, getter),
      ])
    : [];

// или

function* flatTree(tree, childrenKey) {
  if (
    tree instanceof Object &&
    tree[Symbol.iterator] instanceof Function
  ) {
    for (const n of tree) {
      yield n;
      yield* flatTree(n[childrenKey], childrenKey);
    }
  }
}

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

const getFromTree = function(tree, childrenKey, getter = n => n) {
  const result = [];

  for (const stack = this(tree); stack.length;) {
    const n = stack.pop();
    result.push(getter(n));
    stack.push(...this(n[childrenKey]));
  }

  return result;
}.bind(x => x instanceof Array ? [...x].reverse() : []);

// или

const flatTree = function*(tree, childrenKey) {
  const stack = [];

  for (let [ i, arr ] = this(tree); ++i < arr.length || stack.length;) {
    if (i === arr.length) {
      [ i, arr ] = stack.pop();
    } else {
      yield arr[i];
      stack.push([ i, arr ]);
      [ i, arr ] = this(arr[i][childrenKey]);
    }
  }
}.bind(x => [ -1, x?.constructor === Array ? x : [] ]);

Перебираем вложенные объекты:

getFromTree(tree, 'children').forEach(n => console.log(n));

// или

for (const n of flatTree(tree, 'children')) {
  console.log(n);
}

$values = array_combine(
  array_column($example2, 'SECTION_ID'),
  array_column($example2, 'VALUE')
);

$example3 = array_map(function($n) use($values) {
  $n['VALUE'] = $values[$n['SECTION_ID']];
  return $n;
}, $example1);

Уберите deadLineTimestamp из data, вместо data передавайте в экшен

{
  title: data.title,
  deadLineTimestamp: new Date(data.deadLine).getTime(),
  description: data.description,
}

function createTree({
  data,
  key = 'id',
  parentKey = 'parentId',
  childrenKey = 'children',
}) {
  const tree = Object.fromEntries(data.map(n => [ n[key], { ...n } ]));

  return Object.fromEntries(Object.entries(tree).filter(([ , n ]) => !(
    tree[n[parentKey]] && ((tree[n[parentKey]][childrenKey] ??= {})[n[key]] = n)
  )));
}

const tree = createTree({
  data: arr,
  key: 'uid',
  parentKey: 'parentUID',
});

Меняете bottom, который не имеет начального значения - укажите его вместо top.

И со слотами, и без слотов, и как только не пытался уже.

Попытайтесь открыть документацию (а совсем круто будет, если заведёте себе привычку читать документацию постоянно). Там в разделе, посвящённом компоненту таблицы, есть пример, который так и называется - "multiple select".