Aetae

NaN ничему не равен, даже себе. NaN === NaN // false
Проверка на NaN: Number.isNaN(). (Не путать с просто isNaN - который проверяет не на NaN, а на то, что переданное значения не приводится к числу.=\)

Стоит пройтись по документации, прежде чем спрашивать, не думаете?

yAxis: {
    min: 'dataMin'
},

Потому что компоненты никого сами по себе не ждут и рендерятся синхронно, т.е. "прямо сейчас", а ответ от сервера приходит асинхронно, т.е. "когда-нибудь потом". Более того, хук useEffect сам по себе только запускается уже после рендера.

Варианта два:
1. Задать стейт по умолчанию:
const [todos, setTodos] = useState([]);.
Сначала покажет пустой список, потом подгруженный.

2. Не рендерить компонент, пока нет нужных для него данных:

{todos ? <TodoList todos={todos}/> : <LoadingComponent/>}

Сначала покажет какой-нить спиннер, потом подгруженный список.

Понавертели лишнего.
Во-первых: есть хэлперы Promise.reslove(data) и Promise.reject(error), а во-вторых: при возврате из then\catch даже они не нужны.

interface ResponseData {
  status: boolean;
  data?: object;
}

function sendQuery(url: string, data: object): Promise<ResponseData> {
  return fetch(url, {
    method: "POST",
    headers: {
      Accept: "application/json",
      "Content-Type": "application/json"
    },
    body: JSON.stringify(data)
  }).then(response => 
    response.json()
  ).then(data => ({
    status: true,
    data: data
  })).catch(() => {
    throw {
      status: false
    }
  });
}

Хотя ваш вариант НЕ неправильный, просто бессмысленно перегруженный, проблема в том, что TS, увы, не может автоматически вывести тип конструкции new Promise, а потому выдаёт Promise<unknown>. Т.е. каждый раз, когда вы используете new Promise - надо использовать его с дженериком: new Promise<Type>.

Может стоит прочитать документацию?
Желательно всю. Там всё очень понятно и текста не много.

Без прямого ответа:
indexOf
charAt
===
и
parseInt
>
<
или
RegExp
test

Нужно. Редакс нужен для жирного глобального стейта. Маленький локальный стейт должен оставаться локально. Только надо хорошо прикинуть, что оный останется маленьким и локальным.)

require не "берёт картинки из папки", require обрабатывает картинки loader'om и выдаёт в ответ результат. Статический результат, который попадает в бандл.
require(`./img/${name}.png`);- не значит "взять картинку по имени name из папки img во время исполнения", это значит "во время компиляции взять все картинки с маской './img/*.png', обработать loader'ом, получить для каждой статическую ссылку, и положить в бандл".
loader'ы по умолчанию превращают маленькие картинки в data:uri строки, а большие перекладывают в папочку imgs и переименовывают с хэшем, возвращая путь. Но это по-умолчанию, а так они способны много всякой магии творить.

Суть: новые картинки ты, которых не было во время сборки, таким образом не подцепишь.
Но это и не нужно, картинки лежащие в папке public копируются в результирующую папку как есть и доступны по /name.png без require, просто через обычный html и css.

1. computed не будет пересчитаться при обновлении ref'ов или dom-значений. Он работает с реактивными данными.
2. Рефы доступны только после загрузки соответствующих элементов(очевидно), а вы, судя по всему, обращаетесь к ним раньше.

Итого: уберите этот код из computed и поместите в mounted, вручную присваивая значения переменной в data. Не забудьте добавить значения по умолчанию, а также обновлять их при необходимости(по событию resize или ещё какому, способныму повлиять на эти размеры).

P.S. В большинстве случаев то, что вы пытаетесь решить подобным кодом делается на css.

Всё просто - опциональный параметр: /catalog/:slug/:option?.
Если нужно много всякой фигни накрутить, то можно и вообще regexp: /catalog/:slug/(.*)? и ловить любые пути.

Видел тут: https://ant.design/components/progress/
Но это часть системы, придётся расковырять сырцы, если нужно отдельно.

"Чистую" версию тоже когда-то вроде встречал, но тут, увы, ссылок не дам.

const queryKey: AuthMessagesKeys = queryObject.message

Это сработает, но не надёжно - потому что может упасть в рантайме если в message прилетит что-то левое.
Лучше написать тайпгард, типа

function isAuthMessagesKey(str: string): str is AuthMessagesKeys {
  return ['login', 'logout', 'session'].includes(str); 
}

и делать проверку перед использованием.

В vue 3 для реактивости юзаются Proxy, там set не нужен, просто присваивай и всё.)

В lodash уже есть такие методы, юзайте их(или хотб их название, чтоб никого не путать):
1. https://lodash.com/docs/4.17.15#union
2. https://lodash.com/docs/4.17.15#difference

Если конечно поведение полностью соответствует, иначе можно наоборот ещё сильнее запутать, в таком случае лучше производное название использовать.)

^\S*(?:\s+\S+){8}(\s)

Подозреваю в img какой-то мусор прилетает, что и отрубает остальную часть записи. В остальном никакой разницы. Ну разве что background перезаписывает все остальные свойства(даже те что не указаны, т.е. если был задан background-color - он станет по умолчанию, т.е. прозрачным).

Ну break из цикла я чёт не вижу, вот он и крутит while True вечно.

Без ларавел - можно и нужно, только на vue(или чем ещё клиентском) - нельзя.
Вообще, паря, с твоим пониманием сетевых технологий вообще трогать деньги нельзя. Серьёзно, если ты даже клиент от сервера не отличаешь - перепоручи лучше профессионалам.