0xD34F

ищет метод toString - его нет

То есть, если попробовать получить test.toString, то результатом будет undefined. Вы проверьте, так ли это. Будете удивлены.

Какие таблицы будем обрабатывать:

const tables = document.querySelectorAll('селектор таблиц');

Собираем в массив заголовки столбцов, используем элементы этого массива для задания значений атрибута. Как определять, какое именно значение брать для конкретной ячейки? - очевидно же, у них одинаковые индексы:

for (const { tHead, tBodies } of tables) {
  const labels = Array.prototype.map.call(
    tHead.rows[0].cells,
    th => th.textContent
  );

  for (const { rows } of tBodies) {
    for (const { cells } of rows) {
      for (const [ i, label ] of labels.entries()) {
        cells[i].dataset.label = label;
      }
    }
  }
}

или

tables.forEach(table => {
  table.querySelectorAll('tbody td').forEach(function(td) {
    td.setAttribute('data-label', this[td.cellIndex]);
  }, Array.from(table.querySelectorAll('thead th'), th => th.innerText));
});

Задача проверить является ли список палиндромом, я делаю самое банальное, дан список head, я проверяю return head == head[: :-1]

Под списком тут подразумевается связный список, а вовсе не массив. Так что решение ваше ни разу не правильное.

Элемент массива prodNamesArray записывать router-link'у в параметр to:

<router-link :to="`/Product/${item}`">{{ item }}</router-link>

И пробрасывать его в props компонента маршрута.

Вот функция уникализации по нескольким параметрам:

const unique = function*(data, keys = n => n) {
  const picked = new Map;

  for (const n of data) {
    const p = []
      .concat(keys(n))
      .reduce((acc, k) => acc.set(k, acc.get(k) ?? new Map).get(k), picked);

    if (!p.set(this, p.has(this)).get(this)) {
      yield n;
    }
  }
}.bind(Symbol());

А вот так её можно применять в вашем случае:

// собираем новый массив
const newArr = Array.from(unique(arr, n => [ n.name, n.value ]));

// обновляем существующий
arr.splice(0, arr.length, ...unique(arr, Object.values));

const result = data
  .flatMap(n => n.values)
  .filter(n => n.Ids.some(m => arr.includes(m)))
  .map(({ id, title }) => ({ id, title }));

или

const inArr = Set.prototype.has.bind(new Set(arr));
const data.reduce((acc, { values }) => (
  values.forEach(({ Ids, ...n }) => Ids.some(inArr) && acc.push(n)),
  acc
), []);

Делаем просто, ровно то, что спрошено в вопросе:

const result = allCass.filter(function(n) {
  return !this.has(n.id);
}, new Set(defaultCass.map(n => n.id)));

Делаем сложно, решаем задачу в более общем виде (источником данных могут быть не обязательно массивы; условие, по которому значения признаются равными, не будем зашивать непосредственно в код - будет параметром функции):

function* diff(data1, data2, key = n => n) {
  const getKey = key instanceof Function ? key : n => n[key];
  const keys = new Set;

  for (const n of data2) {
    keys.add(getKey(n));
  }

  for (const n of data1) {
    if (!keys.has(getKey(n))) {
      yield n;
    }
  }
}

В вашем случае применять так:

const result = [...diff(allCass, defaultCass, 'id')];

А можно и так:

Array.from(diff('abcdE', 'AcD', n => n.toLowerCase())) // ['b', 'E']

Или так:

for (const n of diff(Array(8).keys(), Array(5).keys())) {
  console.log(n); // 5 6 7
}

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

const Todos = ({ todos, TodoItem }) => (
  <div className="todos">
    {todos.map(n => (
      <div className="todo-item" key={n.id}>
        <TodoItem todo={n} />
      </div>
    ))}
  </div>
);

const HeaderTodoItem = ({ todo }) => (
  <h3>{todo.title}</h3>
);

const AppTodoItem = ({ todo }) => (
  <>
    <img src={todo.img} alt={todo.title} />
    <div>
      <h3>{todo.title}</h3>
      <p>{todo.text}</p>
    </div>
  </>
);

<Todos todos={todos} TodoItem={HeaderTodoItem} />

<Todos todos={todos} TodoItem={AppTodoItem} />

Пытался сделать через reduce из библиотеки lodash

Давайте так - или lodash, или reduce, но не оба сразу:

const newArr = _.map(_.groupBy(arr, 'merch'), (v, k) => ({
  merch: +k,
  games: _.uniq(_.flatMap(v, 'games')),
}));

const newArr = Object
  .entries(arr.reduce((acc, n) => ((acc[n.merch] ??= []).push(...n.games), acc), {}))
  .map(n => ({ merch: +n[0], games: [...new Set(n[1])] }));

const SORT = [
  [ 'без сортировки' ],
  [ 'цена, по возрастанию',         (a, b) => a.price - b.price ],
  [ 'цена, по убыванию',            (a, b) => b.price - a.price ],
  [ 'год создания, по возрастанию', (a, b) => a.formed_in - b.formed_in ],
  [ 'год создания, по убыванию',    (a, b) => b.formed_in - a.formed_in ],
];

const [ sortType, setSortType ] = useState(0);

const data = useMemo(() => {
  const sortFunc = SORT[sortType][1];
  return sortFunc ? [...bands].sort(sortFunc) : bands;
}, [ bands, sortType ]);

<select value={sortType} onChange={e => setSortType(e.target.value)}>
  {SORT.map((n, i) => <option value={i}>{n[0]}</option>)}
</select>

const [ author, setAuthor ] = useState(null);
const [ dateMin, setDateMin ] = useState(null);
const [ dateMax, setDateMax ] = useState(null);

const authors = useMemo(
  () => [...new Set(articles.map(n => n.author))],
  [ articles ]
);
const filteredArticles = useMemo(
  () => [
    [  author, n => n.author === author      ],
    [ dateMin, n => n.publishedAt >= dateMin ],
    [ dateMax, n => n.publishedAt <= dateMax ],
  ].reduce((acc, n) => n[0] ? acc.filter(n[1]) : acc, articles),
  [ articles, author, dateMin, dateMax ]
);

<select value={author} onChange={e => setAuthor(e.target.value)}>
  <option></option>
  {authors.map(n => <option>{n}</option>)}
</select>

от <input type="date" value={dateMin} onChange={e => setDateMin(e.target.value)} />
до <input type="date" value={dateMax} onChange={e => setDateMax(e.target.value)} />

{filteredArticles.map(n => <Card {...n} />)}

Сделать mql свойством компонента, onChange методом, снятие обработчика выполнять в beforeUnmount.

Ну или переписывайте с использованием composition api.

data: () => ({
  handle: null,
  ...
}),
mounted() {
  const mql = matchMedia('(max-width: 768px)');
  const onChange = () => this.handle = mql.matches ? '.image' : null;
  onChange();
  mql.addEventListener('change', onChange);
  this.$on('hook:beforeDestroy', () => mql.removeEventListener('change', onChange));
},

<draggable
  :options="{ handle, ... }"
  ...
>

Сортируем существующий массив:

arr.sort((a, b) => a.surname.localeCompare(b.surname) || a.name.localeCompare(b.name));

Собираем отсортированный новый:

const sorted = (arr, keys) => arr
  .map(n => [ n ].concat(keys(n)))
  .sort((a, b) => {
    let diff = 0;
    a.find((n, i) => diff = i && ((n < b[i]) ? -1 : +(n > b[i])));
    return diff;
  })
  .map(n => n[0]);

const sortedArr = sorted(arr, n => [ n.surname.toLowerCase(), n.name.toLowerCase() ]);

computed: {
  deadlineText() {
    const today = new Date().setHours(0, 0, 0, 0);
    const deadline = new Date(this.task.deadline).setHours(0, 0, 0, 0);
    return [ 'Уже было', 'Сегодня', 'Жди' ][1 + Math.sign(deadline - today)];
  },
},

const [ autoplay, setAutoplay ] = useState(false);
const swiper = useRef();

useEffect(() => {
  swiper.current.autoplay[autoplay ? 'start' : 'stop']();
}, [ autoplay ]);

<input
  type="checkbox"
  checked={autoplay}
  onChange={e => setAutoplay(e.target.checked)}
/>

<Swiper
  onSwiper={instance => swiper.current = instance}
  ...
>

preg_match_all('~https:\/\/\S+~', $str, $matches);
$arr = array_unique($matches[0]);

А может не стоит забивать гвозди лбом? - count(array_unique($arr)).

str_pad($a + 1, strlen($a), 0, STR_PAD_LEFT)

Проверяйте, что target равен currentTarget.