0xD34F

Вот балбес вроде вас. А вот ещё. И ещё.

https://jsfiddle.net/f2g8c7ae/

Можно использовать метаданные маршрутов:

routes: [
  {
    ...
    meta: { pageTitle: 'hello, world!!' },
  },
  {
    ...
    meta: { pageTitle: 'fuck the world' },
  },
  ...
],

<div>{{ $route.meta.pageTitle }}</div>

В компоненте - переносите authCheck из data в computed, используете mapGetters.

я знаю, что правильно менять состояние предыдущего state, то есть setState( prev => !prev ), но как это прописать для моего случая, когда предыдущее состояние должно поменять на значение item.value ?

Если новое состояние не зависит от старого, то и не надо старое состояние трогать: setState(() => value).

нажимаю кнопку Д после кнопки М и в indicator сохраняется значение кнопки М

Чушь. Откуда вы это взяли? Сохраняемое значение у вас лежит в value, не надо смотреть на indicator в момент вызова setIndicator. Делайте это через эффект:

useEffect(() => console.log('indicator: ', indicator), [ indicator ]);

names = [ n[0] for n in x['values'] ]

Погуглил за вас:

https://github.com/radial-color-picker/vue-color-picker
https://github.com/stijlbreuk/vue-color-picker-wheel
https://baianat.github.io/verte/examples.html#whee...

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

Исправляем:

$('form').on('input', function() {
  $('.button').prop('disabled', $('input', this).get().some(n => !n.value));
}).trigger('input');

// или

const form = document.querySelector('form');
const button = document.querySelector('.button');
const inputs = [...form.querySelectorAll('input')];
form.addEventListener('input', () => button.disabled = !inputs.every(n => n.value));
form.dispatchEvent(new Event('input'));

methods: {
  marked: (text, search) => search
    ? text.replace(RegExp(search.replace(/[\\^$|.*?+{}()[\]]/g, '\\$&'), 'gi'), '<mark>$&</mark>')
    : text,
},

<div v-html="marked(text, search)"></div>

Если выделение должно пересекать границы тэгов, то стоит взять какую-нибудь готовую библиотеку под это дело, такую как, скажем, mark.js (пример использования совместно с vue).

:asNavFor="$refs.miniPreview"

Почему это не работает, как подсказывает документация:

$refs заполняются только после того, как компонент был отрисован, и они не реактивны. Это подразумевается только как обходной путь для прямого манипулирования потомками — вам следует избегать доступа к $refs из шаблонов или вычисляемых свойств.

В качестве костыльного решения - можно принудительно обновить компонент после монтирования, тогда при повторном рендеринге слайдеры получат правильные ссылки:

mounted() {
  this.$nextTick(this.$forceUpdate);
},

https://jsfiddle.net/kpvwcsz7/

Создать массив, выдёргивать случайный элемент:

function makeRandomizer([ min, max ]) {
  const numbers = [...Array(max - min + 1).keys()];

  return () => numbers.length
    ? min + numbers.splice(Math.random() * numbers.length | 0, 1)[0]
    : null;
}

Создать массив, перемешать его, доставать последний элемент:

function makeRandomizer([ min, max ]) {
  const numbers = Array.from({ length: max - min + 1 }, (n, i) => min + i);

  for (let i = numbers.length; --i > 0;) {
    const j = Math.random() * (i + 1) | 0;
    [ numbers[i], numbers[j] ] = [ numbers[j], numbers[i] ];
  }

  return () => numbers.pop() ?? null;
}

// Вот так не работает почему-то:
// this.GET_HERITAGEOBJECTS_FROM_DB()

"Почему-то"? А кто вам обещал, что так работать будет? Action'ы вызываются через dispatch, если не объявили action как стрелочную функцию, то dispatch будет доступен через this:

this.dispatch('GET_HERITAGEOBJECTS_FROM_DB');

Или (читаем документацию внимательнее) он всегда доступен как свойство первого параметра action'а.

// Vue ругается: error   Unreachable code   no-unreachable

Во-первых - не vue, а линтер. Во-вторых, это не имеет никакого отношения к вашей проблеме, будет так ругаться на любой код в этом месте. "Unreachable code" - недостижимый код. Этот код никогда не выполнится, потому что он расположен после return.

$('#sel1').change(function() {
  const min = +$(this).val();

  $('#sel2')
    .val((i, v) => Math.max(v, min))
    .children()
    .show()
    .filter((i, n) => +n.value < min)
    .hide();
}).change();

или

const select1 = document.querySelector('#sel1');
const select2 = document.querySelector('#sel2');

select1.addEventListener('change', e => {
  const min = +e.target.value;
  select2.value = Math.max(select2.value, min);
  for (const n of select2.children) {
    n.hidden = +n.value < min;
  }
});

select1.dispatchEvent(new Event('change'));

const count = Array.prototype.reduce.call(
  document.querySelectorAll('.col'),
  (acc, n, i, a) => (
    n.offsetTop !== a[i - 1]?.offsetTop && acc.push(0),
    acc[acc.length - 1]++,
    acc
  ),
  []
);

Вместо filterInput.addEventListener('keyup',... пусть будет

filterInput.addEventListener('input', function() {
  const value = this.value.toLowerCase();

  filterResult.innerHTML = resultArr
    .filter(n => n.toLowerCase().includes(value))
    .map(n => `<li>${n}</li>`)
    .join('');
});

или

filterInput.addEventListener('input', e => {
  const value = e.target.value.toLowerCase();

  filterResult.replaceChildren(...resultArr.reduce((acc, n) => {
    if (n.toLowerCase().indexOf(value) !== -1) {
      (acc[acc.length] = document.createElement('li')).textContent = n;
    }
    return acc;
  }, []));
});

Вставляйте input через один из слотов, например:

<v-treeview>
  <template #label>
    <v-text-field />
  </template>
</v-treeview>

https://jsfiddle.net/L3vquo84/

.*(?= вечера)

$str1.implode('', array_diff(str_split($str2), str_split($str1)))

UPD. Или имелось в виду получение строки из уникальных символов? Тогда так можно:

implode('', array_unique(str_split($str1.$str2)))

arr.sort(key=lambda num: int(str(num)[1:-1] or 0))