0xD34F

идентичны

Уверены? - l и 1 совсем не одно и то же.

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

/^\w+@\w+\.\w{2,}$/.test(str)

console.log(this.$slots.header) // не работает

Ложь, работает. Между "не работает" и "результат работы отличается от желаемого" есть существенная разница, попытайтесь её осознать.

created () {

Что насчёт mounted? Или, если и так не увидите контент слота, mounted + nextTick?

function App() {
  const [ seconds, setSeconds ] = React.useState(60);
  const [ timerActive, setTimerActive ] = React.useState(false);

  React.useEffect(() => {
    if (seconds > 0 && timerActive) {
      setTimeout(setSeconds, 100, seconds - 1);
    } else {
      setTimerActive(false);
    }
  }, [ seconds, timerActive ]);

  return (
    <div>
      {seconds
        ? <React.Fragment>
            <button onClick={() => setTimerActive(!timerActive)}>
              {timerActive ? 'stop' : 'start'}
            </button>
            <div>{seconds}</div>
          </React.Fragment>
        : <button onClick={() => setSeconds(60)}>ещё раз</button>
      }
    </div>
  );
}

https://jsfiddle.net/9rx1qhsy/1/

https://jsfiddle.net/mwoLsdr7/

const prices = {
  'Москва': 100,
  'Санкт-Петербург': 200,
  'Казань': 300,
};

$('form').on('change', function() {
  const [ city1, city2 ] = $('select', this).get().map(n => n.value);

  const price = city1 === city2
    ? prices[city1]
    : prices[city1] + prices[city2];

  $('input', this).val(price);
}).change();

.card:not(:last-child):after {

изучаю Vue.js и никак не могу понять зачем он нужен

Не можете понять - значит вам он не нужен. Отложите его в сторону, и изучите что-нибудь другое.

preg_match_all('/(\w+)=(\w+)/', $str, $matches);
$data = array_combine($matches[1], $matches[2]);

button.addEventListener('click', async () => {
  for (const el of cards) {
    await el.animate([
      { transform: 'rotateX(0deg)' },
      { transform: 'rotateX(180deg)' },
    ], {
      duration: 1000,
      easing: 'linear',
      fill: 'forwards',
    }).finished;
  }
});

Пробовал через emit передать, но получилось перехватить событие только в App.vue, но не в Modal.vue

А вам и не надо этого делать в Modal. Событие генерируется в содержимом слота - вы не можете заранее знать, какое именно.

Ловите его в App, оттуда и управляйте видимостью окна - showModal внутри Modal не нужен, сделайте его параметром. Например.

Где кнопки находятся, что за кнопки, что делать при клике:

const container = document.querySelector('.buttons');
const buttonSelector = '.button';
const onButtonClick = button => console.log(button.id);

Делегирование, обработчик клика добавляем контейнеру с кнопками. Пробуем найти у элемента, где случился клик, предка, который является кнопкой:

container.addEventListener('click', e => {
  const button = e.target.closest(buttonSelector);
  if (button) {
    onButtonClick(button);
  }
});

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

container.querySelectorAll(buttonSelector).forEach(function(n) {
  n.addEventListener('click', this);
}, e => onButtonClick(e.currentTarget));

Никак.

Например если число 200000

А ширина экрана в пикселях - 2000, например. На два порядка меньше. Каким образом, по-вашему, одного пикселя должно хватить для отображения сотни различных положений ползунка?

$arr = array_column(json_decode($json, true), 'array');
$names = explode(', ', $namesStr);

foreach ($arr as $n) {
  if (in_array($n['one'], $names)) {
    $ids[] = $n['id'];
  }
}

Вы пытаетесь получать категорию до того, как получен продукт. Т.е., product.catId у вас undefined. Надо добавить продукт как зависимость эффекту в котором получаете категорию, внутри самого эффекта проверять, что идентификатор категории есть - и только в этом случае делать запрос:

useEffect(() => {
  axios.get('/api/products/random-lucky-box').then(r => setProduct(r.data));
}, []);

useEffect(() => {
  if (product.catId) {
    axios.get(`/api/categories/${product.catId}`).then(r => setCategory(r.data));
  }
}, [ product ]);

const bullshitDateFormat = str =>
  new Date(+str.replace(/\D/g, ''))
    .toLocaleString('ru-RU')
    .slice(0, -3)
    .replace(',', '');

Конечно, .slice(0, -3) выглядит сильно так себе (с другой стороны - коротко), вместо него можно в явном виде (второй параметр) указать при вызове toLocaleString, какие элементы даты надо получить:

{
  year: 'numeric',
  month: '2-digit',
  day: '2-digit',
  hour: '2-digit',
  minute: '2-digit',
}

Суть проблемы, как подсказывает документация:

HTML5 specifies that a <script> tag inserted with innerHTML should not execute.

Так что будем добавлять элемент script вручную. Точнее - заменим тот, что есть, на новый с таким же src.

Добавим ссылку на элемент, в который пишется html:

div(v-html="сontent" ref="content")

Установим наблюдение за свойством, содержащим html-строку:

watch: {
  content() {
    this.$nextTick(() => {
      const oldScript = this.$refs.content.querySelector('script');
      const newScript = document.createElement('script');
      newScript.src = oldScript.src;
      oldScript.parentNode.replaceChild(newScript, oldScript);
    });
  },
},

https://jsfiddle.net/txk5zjLh/

Object.values(arr.reduce((acc, n) => {
  const name = n.name.split(' ').pop();
  acc[name] = +acc[name]?.price < +n.price ? acc[name] : n;
  return acc;
}, {}))

data: () => ({
  activeItem: null,
  items: [
    {
      id: 69,
      name: 'hello, world!!',
      colors: [ 'white', 'blue', 'red' ],
      color: null,
    },
    {
      id: 187,
      name: 'fuck the world',
      colors: [ 'red', 'green', 'blue' ],
      color: null,
    },
    {
      id: 666,
      name: 'fuck everything',
      colors: [ '#fb1', '#e2c', '#3a9', '#cb9' ],
      color: null,
    },
  ],
}),

<v-btn-toggle class="mb-10" v-model="activeItem">
  <v-btn color="#546E7A" v-for="n in items" :key="n.id" :value="n">
    {{ n.name }}
    <v-badge v-if="n.color" :color="n.color" bordered inline tile></v-badge>
  </v-btn>
</v-btn-toggle>
<v-spacer></v-spacer>
<v-btn-toggle v-if="activeItem" v-model="activeItem.color">
  <v-btn v-for="n in activeItem.colors" :key="n" :color="n" :value="n"></v-btn>
</v-btn-toggle>

https://jsfiddle.net/ud1o4y9L/