0xD34F

array_diff($arrays, [ "none"]); - этот способ Не работает

Массивы вложенные. Так что каждый надо обработать отдельно:

$newArrays = array_map(fn($arr) => array_diff($arr, [ 'none' ]), $arrays);

v-for="area in `${ this.$route.params.type }Areas`"

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

v-for="area in this[`${$route.params.type}Areas`]"

https://jsfiddle.net/c0tjks3g/

разве vue не повсеместно лишает возможности мутировать данные родителя в потомках?

Не лишает.

как вообще так вышло, что v-model внизу сумел изменить serviceBlocksBlocks

Да вот так.

Не надо никакие индексы трогать, достаточно дополнить строку спереди до нужной длины:

const max = 4;

<div>
  {Array.from(
    value.padStart(max, '-'),
    n => <span>{n}</span>
  )}
</div>

const average = arr => arr.reduce((acc, n) => acc + n, 0) / arr.length;
const extractValues = (group, item, key) => item[key].forEach(n => ((group.values[n.id] ||= { id: n.id, name: n.name })[key] ||= []).push(n.value));

const result = Object
  .values(arr
    .flatMap(n => n.properties.groups)
    .reduce((acc, n) => (
      acc[n.id] ||= {
        id: n.id,
        name: n.name,
        wellBeing: [],
        values: {},
      },
      acc[n.id].wellBeing.push(n['well-being']),
      extractValues(acc[n.id], n, 'needs'),
      extractValues(acc[n.id], n, 'provision'),
      acc
    ), {}))
  .map(n => ({
    id: n.id,
    name: n.name,
    value: average(n.wellBeing),
    values: Object.values(n.values).map(m => (
      m.needs = average(m.needs),
      m.provision = average(m.provision),
      m
    ))
  }));

const xxx = ([...str]) => [...new Set(Array.from(
  { length: str.length * 10 },
  (n, i) => str.map((m, j) => (j === (i / 10 | 0)) ? i % 10 : m).join('')
))];

или

function xxx(str) {
  const arr = str.split('');
  const result = [ str ];

  for (const [ i, n ] of arr.entries()) {
    for (let j = 0; j < 10; j++) {
      if (j !== +n) {
        arr[i] = j;
        result.push(arr.join(''));
      }
    }

    arr[i] = n;
  }

  return result;
}

updateCount(item, change) {
  item.count += change;
}

<button (click)="updateCount(item,  1)">+</button>
<button (click)="updateCount(item, -1)">-</button>

data: () => ({
  items: [ 1, 25, 32, 4, 5 ],
  filter: false,
}),
computed: {
  filteredItems() {
    return this.items.filter(n => n < 10);
  },
},

<label>
  <input type="checkbox" v-model="filter">
  Фильтровать
</label>
<ul>
  <li v-for="n in (filter ? filteredItems : items)">{{ n }}</li>
</ul>

const first = document.querySelector('#first');
const second = document.querySelector('#second');

const showOptions = {
  1: [ '1', '11', '16' ],
  2: [ '12', '14', '15' ],
};

first.addEventListener('change', function() {
  const toShow = showOptions[this.value];
  [...second].forEach(n => n.hidden = +n.value && toShow && !toShow.includes(n.value));
});

const nav = document.querySelector('.nav');
const itemSelector = '.nav-link';
const image = document.querySelector('.preview-img');
const category = document.querySelector('.preview-head');

function updatePreview(data) {
  image.src = data.img;
  category.textContent = data.category;
}

Назначаем обработчик события каждому элементу индивидуально:

nav.querySelectorAll(itemSelector).forEach(function(n) {
  n.addEventListener('mouseenter', this);
}, e => updatePreview(e.target.dataset));

Или, применяем делегирование:

nav.addEventListener('mouseover', e => {
  const data = e.target.closest(itemSelector)?.dataset;
  if (data) {
    updatePreview(data);
  }
});

Зачем делать свойства элементов metrics свойствами родительских объектов? Передавайте данные в компонент с таблицей как есть. Добавьте только к соответствующим элементам headers свойство, которое будет указывать, что этот столбец должен отображать данные из вложенного массива metrics, типа metricsColumn: true.

В компоненте таблицы получаете список этих столбцов:

computed: {
  metricsColumns() {
    return this.headers.filter(n => n.metricsColumn);
  },
},

И динамически формируете под них слоты:

<template
  v-for="(n, i) in metricsColumns"
 #[`item.${n.value}`]="{ item: { metrics: { [i]: item } } }"
>
  <v-chip
    :color="colors[item.metricsValueMarkName]"
    :key="n.value"
    dark
  >
    {{ item.metricsValue }}
  </v-chip>
</template>

https://codesandbox.io/s/for-httpsqnahabrcomq95964...

Выводится фиксированное количество разрядов числа, вместо отсутствующих подставляются нули:

function output(value) {
  const digits = document.querySelectorAll('селектор span`ов');
  const { length } = digits;

  Array
    .from(`${value}`.padStart(length, 0).slice(-length))
    .forEach((n, i) => digits[i].innerText = n);
}

Число выводится как оно есть, количество span'ов не фиксировано:

function output(value) {
  document.querySelector('селектор родительского элемента span`ов').innerHTML = Array
    .from(`${value}`, n => `<span>${n}</span>`)
    .join('');
}

const [ first, ...rest ] = document.querySelectorAll('[type="checkbox"]');
const onChange = () => first.checked = rest.every(n => n.checked);
first.addEventListener('change', () => rest.forEach(n => n.checked = first.checked));
rest.forEach(n => n.addEventListener('change', onChange));

Где элементы находятся, и кого из них (индексы) надо удалить:

const parent = document.querySelector('селектор элемента, из которого надо кого-то удалить');
const toRemove = [ 3, 1, 666, 2 ];

Удаляем:

toRemove
  .map(n => parent.children[n])
  .filter(Boolean)
  .forEach(n => n.remove());

// или

toRemove
  .sort((a, b) => b - a)
  .forEach(n => parent.children[n]?.remove());

// или

[...parent.children].forEach((n, i) => toRemove.includes(i) && n.remove());

:style="mapStyles"

data() {
  return {
    mapStyles: {
      styles: [

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

Во-вторых - компонент карты не имеет параметра style. То есть, документация врёт. Да, так бывает. Зато есть параметр options, частью которого стили и являются. Так что вам следует заменить

mapStyles: { на options: {

:style="mapStyles" на :options="options"

Ну и ещё стоит убедиться, что api key есть - без него стили применяться не хотят.

data: () => ({
  contact: '',
}),
methods: {
  onClick() {
    if (this.contact) {
      this.$emit('close');
    }
  },
},

<input v-model="contact">

<button @click="onClick">

const getStrs = (arrs, len) => [
  '*'.repeat(len + 2),
  ...arrs.flatMap(arr => arr
    .reduce((acc, n) => {
      let g = acc[acc.length - 1];
      (g && (g[1] + n.length + !!g[0].length) <= len) || acc.push(g = [ [], 0 ]);
      g[1] += n.length + !!g[0].length;
      g[0].push(n);
      return acc;
    }, [])
    .map((n, i, a) => `*${n[0].join(' ')[a.length > 1 ? 'padStart' : 'padEnd'](len, ' ')}*`)),
  '*'.repeat(len + 2),
];


console.log(getStrs(textArray, 16));

data: () => ({
  focused: false,
}),

<input
  :placeholder="focused ? '' : 'hello, world!!'"
  @focus="focused = true"
  @blur="focused = false"
>

А вообще, js-код для решения вашей задачи не нужен:

input:focus::placeholder {
  color: transparent;
}