0xD34F

canvas

const sum = Array
  .from(document.querySelectorAll('.item.in'))
  .reduce((acc, n) => acc + +n.dataset.price, 0);

const getNested = (root, path) => path.split('.').reduce((p, c) => p != null ? p[c] : p, root);

const id = getNested(e, 'path.1.attributes.uid.textContent');

Или есть такая штука (UPD. Теперь и браузерами поддерживается):

// можно немного сократить функцию извлечения вложенных значений
const getNested = (root, path) => path.split('.').reduce((p, c) => p?.[c], root);

// а можно и вообще отказаться от этой функции, смысла в ней теперь немного
const id = e?.path?.[1]?.attributes?.uid?.textContent;

Делаете метод изменения масштаба:

zoom(change) {
  this.map.setZoom(this.map.getZoom() + change);
},

И подключаете его в качестве обработчика клика к кнопкам:

<div @click="zoom(+1)">zoom in</div>
<div @click="zoom(-1)">zoom out</div>

Кнопкам назначаете абсолютное позиционирование, чтобы можно было над картой расположить. Ну и стилизуете их как-нибудь ещё, тут уже вам виднее. Например.

floor($value / 10) * 10

Потому что событие mouseout возникает, когда курсор уходит на какой-либо из вложенных элементов - в вашем случае это i. Замените mouseout на mouseleave. А ещё почитайте - будет нелишним.

function handler(e) {
  console.log('hello, world!!');
  this.removeEventListener(e.type, handler);
}

document.addEventListener('click', handler);

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

document.addEventListener('click', handler, { once: true });

В дочернем компоненте обрабатываете клик по кнопке удаления так: @click="$emit('remove')".

А в родительском компоненте подписываетесь на это событие: @remove="removeFromBasket(item)".

Можно сделать computed свойство - объект, где ключами будут dsec_nnn (вы их используете для генерации id строк, так что они, как я понял, уникальны), а значениями dsec_declarant_kind, изменения которых вас интересуют:

computed: {
  declarantKind() {
    return this.dsec.reduce((acc, n) => (
      acc[n.dsec_nnn] = n.dsec_declarant_kind,
      acc
    ), {});
  },
},

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

watch: {
  declarantKind(newVal, oldVal) {
    const [ key ] = Object
      .entries(newVal)
      .find(([ k, v ]) => oldVal.hasOwnProperty(k) && oldVal[k] !== v) || [];

    if (key) {
      const item = this.dsec.find(n => n.dsec_nnn === key);
      console.log('объект:', item);
      console.log(`было: ${oldVal[key]}`);
      console.log(`стало: ${newVal[key]}`);
    }
  },
},

modals.entries() судя по документации должен предоставить [key, value]

Нет, не должен. Он итератор возвращает, а не массив. Так что

[...modals.entries()].map(([ id, modal ]) => (

))

data: () => ({
  selected: null,
  items: [
    { title:  'hello, world!!', value: '' },
    { title:  'fuck the world', value: '' },
    { title: 'fuck everything', value: '' },
  ],
}),

<div v-for="n in items">
  <label>
    <input type="radio" :value="n.title" v-model="selected">
    {{ n.title }}
  </label>
  <input type="text" v-model="n.value" :disabled="selected !== n.title">
</div>

При клике в первом компоненте делайте $emit выбранного значения / индекс кликнутого элемента / или что там у вас в родительский компонент, а оттуда в качестве параметра передавайте его во второй. Например.

const result = arr.reduce((acc, n, i) => {
  if (здесь вы проверяете элемент массива на соответствие своему условию) {
    let group = acc[acc.length - 1];
    if (!group || group.index !== i - 1) {
      group = { data: [] };
      acc.push(group);
    }

    group.index = i;
    group.data.push(n);
  }

  return acc;
}, []).map(n => n.data);

.fade-leave-active {
  transition: opacity 1s;
}

.fade-leave-to {
  opacity: 0;
}

mounted() {
  this.show = false;
},

$('#form [type="radio"]:enabled').eq(0).click();

return data.map(n => n.join(columnDelimiter)).join(lineDelimiter);

$('ul.list').on('click', 'li', function(e) {
  if (e.target === this) {
    $(this).children('ul').slideToggle();
  }
});

или

$('ul.list li').click(e => {
  e.stopPropagation();
  $('> ul', e.currentTarget).slideToggle();
});

Оставьте регулярное выражение как оно есть, и просто вырезайте первые сколько там вам надо символов:

phone.value = phone.value.replace(/[^+0-9]/g, '').slice(0, 11);

А вообще, возможно вам следует посмотреть в сторону уже готовых решений (например), вместо того, чтобы заниматься подобным велосипедостроением.

Это чё, в setInterval запихнули подключение обработчика keydown? Умно. Не нужен тут никакой setInterval.

Сам обработчик keydown слишком сложно выглядит - зачем в четырёх разных местах делать один и тот же вызов функции? Сначала меняете координаты, а в самом конце - дёргаете перерисовку.

Размер картинок - а если решите поменять? Или опечатаетесь где-нибудь? Сделайте константу.

Что касается рисования, то наверное, проще всего будет замостить холст фоновым изображением, а потом рисовать персонажа.

Как это всё может выглядеть:

const canvas = document.querySelector('#canvas');
const ctx = canvas.getContext('2d');

const TILE_SIDE = 32;

let pickX = 0;
let pickY = 0;

const ground = new Image();
ground.src = 'Ground.png';
const pick = new Image();
pick.src = 'Pick.png';

document.addEventListener('keydown', function(e) {
  switch (e.key) {
    case 'w': pickY -= TILE_SIDE; break;
    case 'a': pickX -= TILE_SIDE; break;
    case 's': pickY += TILE_SIDE; break;
    case 'd': pickX += TILE_SIDE; break;

    default: return;
  }

  draw();
});

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  for (let x = 0; x < canvas.width; x += TILE_SIDE) {
    for (let y = 0; y < canvas.height; y += TILE_SIDE) {
      ctx.drawImage(ground, x, y);
    }
  }

  ctx.drawImage(pick, pickX, pickY);
}

draw();