Юрий

const reverseNumber = num =>
  num >= 0
    ? +`${num}`.split('').reverse().join('')
    : -(`${-num}`.split('').reverse().join(''))

Рисуешь одну картинку поверх другой, к верхней применяешь маску. Для этого подойдёт svg либо canvas

Да кому он нужен? Никак сдать не выгодно.

Я бы придерживался правила: всё что можно сделать без js - надо делать без js.

Grid чувствует себя прекрасно.

Можно уже спокойно их использовать и забыть про flexbox?

Grid не является заменой Flex. Вот тут очень важно это понимать. Плохой идеей будет взять весь Flex на странице и заменить его на Grid

Технически можно использовать практически все unicode символы, за исключением самых первых, управляющих. То есть это не только буквы, но и всевозможные символы вроде ∑∜♫ и.т.д. Они могут отсутствовать в каких-то шрифтах, но на функциональность CSS не повлияют. Как говорил Chris Coyier еще 10 лет назад: "yes-it-works-in-IE6™ & yes-it-validates™".

Другой вопрос - это практичность использования "альтернативных" селекторов. Тут есть несколько минусов:

• Есть устоявшиеся английские названия для всех стандартных элементов интерфейса и вспомогательных оберток. Использование других названий (в том числе на другом языке) приведет к потере скорости чтения кода, придется привыкать к новым именованиям.
  
• Придется постоянно переключаться между раскладками при написании кода. Минус к удобству.
  
• В любимой IDE вашего коллеги может быть шрифт, не поддерживающий ваши альтернативные non-ascii символы. Ему будет плохо.
  

Так что да, использовать можно, но как только у вас появятся коллеги, ваш код скорее всего начнут сравнивать с языком YoptaScript и вам придется переучиться на использование английского, чтобы "быть как все" и соответствовать общепринятым стандартам.

Но из за разных кодировок не выходит

Использовать одну и ту же кодировку

кроме самой документации Vue

Для изучения Vue рекомендую только и исключительно документацию по Vue, на основе которой и строятся васянские видеоуроки и лохокурсики.
И да, осильте поиск.

Обычный градиент под углом на фоне.
Одна строчка кода.

background: linear-gradient(-45deg, red 50%, black 50%);

У меня переход цвета по середине. Сдвиньте куда нужно и если нужно.
Можно поставить на фон только одному блоку, второй оставить однотонным (а еще лучше прозрачным).
Можно задать градиент псевдоэлементу одного из блоков и спозиционировать куда нужно.

* {
  box-sizing: border-box;
}

Тут скорее надо сделать, чтобы на мобилке флекс был колонкой, а на десктопе строкой.

flex-direction: row;
flex-direction: column;

Вырезаете обработчики mouseover и mouseout, динамическое назначение классов, свойство isShipHovered и метод chooseShipOnBoard.

Заменяете .hover на .square:hover - всё, больше ничего не надо. Если есть возможность что-то сделать только через css - делайте это что-то только через css.

UPD. Вынесено из комментариев:

мне нужно было использовать именно через script, потому,что я потом буду манипулировать этим методом chhoseShipOnBoard, например ещё добавлять классы к соседним блокам, чтобы при наведении выделялся не только текущий блок, но и несколько рядом находящихся блоков

Тогда сохраняйте индекс элемента, на который пользователь навёл курсор. Также сделайте метод, который будет получать индекс элемента и в зависимости от текущего выделенного возвращать классы, которые надо назначить:

data: () => ({
  hovered: null,
  ...
}),
methods: {
  getClasses(index) {
    return что-то, в зависимости от index и this.hovered;
  },
},

<span
  v-for="(n, i) in squares"
  @mouseover="hovered = i"
  @mouseout="hovered = null"
  :class="getClasses(i)"
>

https://jsfiddle.net/arw16jtf/