0xD34F

Про стили не понял, а стрелки... Встречный вопрос - почему они должны убираться? Вы эти элементы создали - сами и решайте, что с ними делать. Например, можно их показывать/прятать при создании/уничтожении слайдера. После инициализации/дестроя у контейнера переключается класс swiper-container-initialized, можно назначать нужные стили в зависимости от его наличия:

.swiper-container:not(.swiper-container-initialized) {
  .swiper-button-prev,
  .swiper-button-next,
  .swiper-pagination {
    display: none;
  }
}

Потому что при преобразовании массива в строку, согласно спецификации, используется метод join. Который по умолчанию в качестве разделителя (опять же, согласно спецификации) использует запятую.

"Как убрать" - очевидно, вызывать join самостоятельно, указывая пустую строку.

В props добавить value: Boolean,, а в <toggle-button -

:value="value"
@input="$emit('input', $event)"

Или, в <toggle-button добавить v-on="$listeners".

let isBtn1Clicked = false;

button1.addEventListener('click', () => isBtn1Clicked = true);
button2.addEventListener('click', () => {
  if (isBtn1Clicked) {
    // ...
  }
});

или

button1.addEventListener('click', e => e.target.classList.add('clicked'));
button2.addEventListener('click', () => {
  if (button1.classList.contains('clicked')) {
    // ...
  }
});

или

button2.disabled = true;

button1.addEventListener('click', () => button2.disabled = false);
button2.addEventListener('click', () => {
  // ...
});

или

button2.hidden = true;

button1.addEventListener('click', () => button2.hidden = false);
button2.addEventListener('click', () => {
  // ...
});

или

button1.addEventListener('click', () => {
  button2.addEventListener('click', () => {
    // ...
  });
}, { once: true });

const obj = Object.fromEntries(arr.map(n => [ n.name, n.number ]));
// или
const obj = arr.reduce((acc, n) => (acc[n.name] = n.number, acc), {});
// или
const obj = Object.assign({}, ...arr.map(n => ({ [n.name]: n.number })));

Или, в более общем виде:

function toObj(data, key, val = n => n) {
  const getKey = key instanceof Function ? key : n => n[key];
  const getVal = val instanceof Function ? val : n => n[val];
  const obj = {};

  for (const n of data) {
    obj[getKey(n)] = getVal(n);
  }

  return obj;
}

Пользоваться этим можно так (ваш случай):

const obj = toObj(arr, 'name', 'number');
// {Kolya: '5', Olga: '10'}

А можно так:

const charCodes = toObj('abc', n => n.charCodeAt());
// {97: 'a', 98: 'b', 99: 'c'}

И даже так тоже можно:

<input name="xxx" value="69">
<input name="yyy" value="187">
<input name="zzz" value="666">

const inputValues = toObj(document.querySelectorAll('input'), 'name', 'value');
// {xxx: '69', yyy: '187', zzz: '666'}

погуглил за вас

position: fixed;
right: 0;
top: 0;

идентичны

Уверены? - 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));