alaskafx

locomotive-scroll
ScrollMagic
scrolltrigger

JSX позволяет вернуть только один блок, т.е.

<div>Первый блок</div>
<div>Второй блок</div>

вы вернуть не сможете. Чтобы не плодить лишние родительские div'ы, существует
<React.Fragment></React.Fragment>
в который можно обернуть несколько блоков и вернуть их. В DOM'е, который вам отрисовывает браузер он никак не отобразится. а запись
<></> - это просто короткая запись фрагмента.

Ну а по факту ответ был дан выше - используйте при необходимости, ничего плохого в этом нет)

Сперва избавимся от ключей, т.к. они не важны, получим массив значений:

const values = Object.values(obj);

Дальше есть такие варианты:

const result = values.flat().length;
// или
const result = [].concat(...values).length;
// или
const result = values.reduce((acc, n) => acc + n.length, 0);
// или
const result = eval(values.map(n => n.length).join('+')) ?? 0;

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

let result = 0;
for (const k in obj) {
  result += Object.hasOwn(obj, k) && obj[k].length;
}

Можно тупо стилями. Посмотри на вот этот, например:
https://github.com/ugogo/react-input-verification-code
https://codesandbox.io/s/basic-6ejdp

Это не чистый html/css, но идею понять можно через devtools

const str = "Нажмите клавишу &Enter& для...";
const words = [...str.matchAll(/&(?<word>[^&]+)&/g)].map(match => match[1]); // ["Enter"]
const newStr = str.replace(/&+/g, ''); // 'Нажмите клавишу Enter для...'

const circles = reactive(Array.from({ length: 10 }, () => {
  const size = `${50 + Math.random() * 50 | 0}px`;

  return {
    left: `${Math.random() * window.innerWidth | 0}px`,
    top: `${Math.random() * window.innerHeight | 0}px`,
    width: size,
    height: size,
  };
}));

function onMouseMove({ pageX, pageY }) {
  circles.forEach(n => {
    const angle = Math.atan2(-pageX + parseInt(n.left), pageY - parseInt(n.top));
    n.transform = `translate(-50%, -50%) rotate(${angle}rad)`;
  });
}

onMounted(() => document.addEventListener('mousemove', onMouseMove));
onBeforeUnmount(() => document.removeEventListener('mousemove', onMouseMove));

<div v-for="n in circles" :style="n" class="circle"></div>

.circle {
  position: absolute;
  display: inline-block;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  border: 10px solid silver;
  border-bottom-color: black;
  border-radius: 50%;
}

https://jsfiddle.net/ah0Lywrs/

Элементарно, вот те на коленке накидал:


Только он не учитывает кучу всяких edge-case, самое очевидное: изменения ширины в процессе работы - следует добавить ещё обёртку и ResizeObserver.
Но и не очевидных там много, потому для таких вещей обычно используют готовые либы.)

Git попробует разрешить конфликт сам. Если не выйдет, предложит сделать это вам.
Флаг -m (message) – это добавить сообщение к коммиту

1)предложит сначала стянуть к себе ветку, если есть конфликты предложит их разрешить, потом смерджить, после этого можно пушить еще раз
2) он значит message. То есть сообщение к коммиту

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

data() {
  return {
    number: 0
  };
},
selectedCarNumber: {
            get: function () {
                return this.number;
            },
            set: function (value) {
                this.number = value;
            }
        },

Сеттер должен изменить данные, которые используются в геттере.

Давайте рассмотрим на конкретном примере. Пусть есть массив объектов, на основе которых создаются чекбоксы:

data: () => ({
  items: [
    { checked: false, label: '...' },
    { checked: false, label: '...' },
    ...
  ],
}),

<label v-for="n in items">
  <input type="checkbox" v-model="n.checked">
  {{ n.label }}
</label>

И мы хотим сделать чекбокс, который позволял бы устанавливать или снимать все чекбоксы сразу. Его состояние будет описываться вычисляемым свойством. Геттер - очевидно, будет содержать проверку, что все чекбоксы установлены. А сеттер будет устанавливать переданное ему значение всем чекбоксам. Как-то так:

computed: {
  get() {
    return this.items.every(n => n.checked);
  },
  set(val) {
    this.items.forEach(n => n.checked = val);
  },
},

<label>
  <input type="checkbox" v-model="all">
  ALL
</label>

https://jsfiddle.net/j7hr68t4/

some

Добавьте pointer-events: none; для .modal::before.

computed: {
  objCopy() {
    return { ...this.obj };
  },
},
watch: {
  objCopy(newObj, oldObj) {
    for (const [ k, v ] of Object.entries(newObj)) {
      if (v !== oldObj[k]) {
        console.log(`obj.${k} changed from "${oldObj[k]}" to "${v}"`);
      }
    }
  },
},

Потому, что kol это индекс не в массиве, а в команде юзера. Обычно эта команда идёт прямо с начала строки, т.е. с индекса 0.

Надо просто exitElement = words[i]

Потому что на второй итерации в этой строке
let kol = resMessage.indexOf(words[i])
kol будет равен 0.
В массиве по этому индексу хранится /me

Предполагаю, что надо заменить на
let kol = i

P.S. для отладки используйте дебаггеры и логгирование

https://codepen.io/topicstarter/pen/BaRxqXR - дальше сами докручивайте

Но такой принцип так себе, когда используешь vue, но придумывать за тебя мне лень. Я использовал события, для роутера лучше использовать хуки