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 => {
  const btn = e.target.closest('.more-btn');
  for (const n of document.querySelectorAll('.more-btn')) {
    n.classList.toggle('active', n === btn && !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 getNestedData = arr =>
  Array.isArray(arr)
    ? arr.flatMap(n => [ n, ...getNestedData(n.children) ])
    : [];

for (const n of getNestedData(DATA)) {
  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 createTreeFromArray(arr, key, parentKey) {
  const tree = Object.fromEntries(arr.map(n => [ n[key], { ...n } ]));

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


const tree = createTreeFromArray(arr, 'uid', 'parentUID');

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

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

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