0xD34F

is
слоты

Потому что вы постоянно обновляете стейт.

Наверное, вы хотели задать начальное значение - указывайте его в качестве параметра при вызове useState.

как правильно сделать из этого директиву?

Правильно - никак. Использовать execCommand не надо:

Note: This method is obsolete and should not be used. In particular, to interact with the clipboard, consider using the Clipboard API instead.

Так что последуем совету из документации, и воспользуемся современным инструментарием:

const clipboardDirective = (() => {
  const values = new Map();
  const onClick = e => navigator.clipboard.writeText(values.get(e.currentTarget));

  return {
    bind(el, binding) {
      el.addEventListener('click', onClick);
      values.set(el, binding.value);
    },
    update(el, binding) {
      values.set(el, binding.value);
    },
    unbind(el) {
      el.removeEventListener('click', onClick);
      values.delete(el);
    },
  };
})();

Vue.directive('clipboard', clipboardDirective);

Ну как, окей?

Добавим в компонент свойство, которое будет содержать в себе текущее значение прокрутки:

data: () => ({
  scroll: 0,
  ...
}),

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

created() {
  window.addEventListener('scroll', () => this.scroll = window.scrollY);
},

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

computed: {
  scrollClasses() {
    return что-то, в зависимости от значения this.scroll;
  },
  ...
},

<div :class="scrollClasses"></div>

https://jsfiddle.net/o1hjb79u/

array.reduce((acc, el) => {
  el.forEach((n, i) => {
    acc[i] = acc[i] || [];
    n.forEach((m, j) => (acc[i][j] = acc[i][j] || []).push(...[].concat(m)));
  });

  return acc;
}, [])

const result = ind.reduce((acc, col) => {
  arr.forEach((n, i) => {
    acc[i].push(i ? n.filter((m, j) => arr[0][j] === col) : col);
  });
  
  return acc;
}, arr.map(() => []));

или

const indObj = Object.fromEntries(ind.map((n, i) => [ n, i ]));
const result = arr.reduce((acc, n, i) => (
  i && n.forEach((m, j) => acc[i][indObj[arr[0][j]]].push(m)),
  acc
), arr.map((_, i) => ind.map(n => i ? [] : n)));

О чём идёт речь - значение, инпут и кнопка:

const min = 666;
const inputSelector = 'input';
const buttonSelector = 'button';

Слушаем событие input, смотрим, как значение инпута соотносится с минимально допустимым:

const input = document.querySelector(inputSelector);
const button = document.querySelector(buttonSelector);

input.addEventListener('input', e => button.disabled = e.target.value < min);
input.dispatchEvent(new Event('input'));

// или

const $input = $(inputSelector);
const $button = $(buttonSelector);

$input.on('input', () => $button.prop('disabled', $input.val() < min)).trigger('input');

const Modal = (props) => {
  const onClick = e => {
    if (e.target.classList.contains('close') || !e.target.closest('.modal-content')) {
      props.close();
    }
  }

  return (
    <div className="modal" onClick={onClick}>
      <div className="modal-content">
        <span className="close">&times;</span>
        {props.children}
      </div>
    </div>
  );
};

const App = () => {
  const [ opened, setOpened ] = React.useState(false);

  const open = () => setOpened(true);
  const close = () => setOpened(false);

  return (
    <div>
      <h2>Modal Example</h2>
      <button onClick={open}>Open Modal</button>
      {opened && <Modal close={close}>hello, world!!</Modal>}
    </div>
  );
}

https://jsfiddle.net/zuscf0wo/

Math.max(1, Math.min(100, новое значение счётчика))

А где же обработчик onChange? Почему его нет? Надо добавить.

Потому что при каждом событии focus вы добавляете новый обработчик keydown.

Элементы списка - вместо click обрабатывайте mousedown (в этом случае вручную скрывать список не надо).

Или, добавьте списку обработчик mousedown, где будет выполнятся отмена действия по умолчанию.

Vue-slick - это не более чем обёртка над обычным slick'ом, так что vue про клонированные слайды ничего не знает, создаёт их не он. Соответственно, и обработчикам событий, добавляемым с помощью vue, там взяться неоткуда.

Делегируйте обработку событий - обработчик вешается на корневой элемент слайдера, был ли клик выполнен по слайду определяется по наличию класса slick-slide у предков целевого элемента, номер слайда можно определить через атрибут data-slick-index (или можете назначать слайдам какие-то свои классы/атрибуты для выяснения, где был произведён клик).

https://codesandbox.io/s/vue-template-3d5h7

Кого надо посчитать: const className = 'qq-upload-file';.

Как получить элементы:

const elements = document.querySelectorAll(`.${className}`);
// или
const elements = document.getElementsByClassName(className);

Как извлечь из элемента его текстовое содержимое:

const getText = el => el.textContent;
// или
const getText = el => el.innerText;
// или (т.к., вложенных элементов нет)
const getText = el => el.innerHTML;

Как получить из коллекции элементов массив текстов:

const texts = Array.from(elements, getText);

// или

const texts = Array.prototype.map.call(elements, getText);

// или

const texts = [];
for (const n of elements) {
  texts.push(getText(n));
}

// или

const texts = [];
for (let i = 0; i < elements.length; i++) {
  texts[i] = getText(elements[i]);
}

Как посчитать количество уникальных элементов в массиве:

const uniqueCount = new Set(texts).size;

// или

const { size: uniqueCount } = new Map(texts.map(n => [ n, n ]));

// или

const [ uniqueCount ] = texts.reduce((acc, n) => {
  acc[0] += !(acc[1][n] = acc[1].hasOwnProperty(n));
  return acc;
}, [ 0, {} ]);

// или

const uniqueCount = texts.filter((n, i, a) => i === a.indexOf(n)).length;

Как получить input'ы:

const inputs = document.querySelectorAll('form input');
// или
const inputs = document.forms[0].elements;
// или
const inputs = document.querySelector('form').getElementsByTagName('input');

Как из input'а достать его name:

const getName = el => el.name;
// или
const getName = el => el.getAttribute('name');
// или
const getName = el => el.attributes.name.value;

Как собрать массив name'ов:

const names = Array.from(inputs, getName);

// или

const names = Array.prototype.map.call(inputs, getName);

// или

const names = [];
for (const n of inputs) {
  names.push(getName(n));
}

// или

const names = [];
for (let i = 0; i < inputs.length; i++) {
  names[i] = getName(inputs[i]);
}

activeProjects.map((project, i) => {
  <div key={i} className="focus-projects">

Ничего не возвращаете. Надо или фигурные скобки убрать, или return добавить.

Но вообще, пытаетесь делать что-то очень странное. Зачем массив activeProjects нужен как свойство стейта? Собирайте его прямо в render:

render() {
  const activeProjects = this.props.projects.filter(n => n.ProjectStatus === 'ACTIVE');
  ...

jsfiddle.net/wLqme4h9

https://nodejs.org/api/esm.html

const result = Object
  .entries(arr.reduce((acc, n, i) => ((acc[n] = acc[n] || []).push(i), acc), {}))
  .map(([ label, indexes ]) => indexes.length > 1 ? { label, indexes } : label);

const result = Object.values(arr.reduce((acc, n) => (
  (acc[n.ID] = acc[n.ID] || { ID: n.ID })[n.FIELD] = n.VALUE,
  acc
), {}));