0xD34F

Потому что документацию не читаете:

поскольку наше приложение — одностраничное, не сконфигурировав соответствующим образом сервер мы заставим пользователей получать ошибку 404, если они перейдут по http://oursite.com/user/id напрямую

<...>

всё, что нужно — единственная "резервная" запись в конфигурации сервера. Если URL не совпадает ни с одним статическим файлом, сервер должен просто отдать index.html, в котором и живёт наше приложение

Не надо indexOf, индексы доступны в v-for без каких-либо дополнительных телодвижений:

<div v-for="(row, iRow) in rows" class="board__rows">
  <div
    v-for="(col, iCol) in columns"
    v-text="col + row"
    :class="[ [ 'white', 'black' ][(iRow ^ iCol) & 1], 'board__square' ]"
  ></div>
</div>

Cannot read properties of undefined (reading 'lastname')

Понятно, смотрим, где есть попытка чтения свойства lastname.

async addNewEmployee({ commit }, employee) {
    await axios
        .post(`http://127.0.0.1:8000/api/v1/employees/`, {
            lastname: employee.lastname,

Тоже понятно, смотрим, где вызывается addNewEmployee и что туда передаётся.

@submit.prevent="addNewEmployee(employee)"

А вот здесь непонятно - что такое employee? Такого свойства в компоненте нет. Надо добавить. Его содержимым будет то, что сейчас находится в хранилище - firstname, lastname, number - там, в хранилище, этим данным делать нечего.

https://vuejs.org/api/sfc-script-setup.html#define...

должен быть более лаконичный способ, чем плодить такие переменные

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

Или это считается нормальной практикой?

Да, считается. У говнокодеров.

Встречный вопрос - почему вы решили, что класс должен меняться? Может, всё-таки стоит почаще заглядывать в документацию, а?

app.ifScroll =

Меняйте эту чушь на ifScroll.value =.

нет примера их использования

И не должно быть - всё более чем очевидно.

Конечно, для тех, кто о vue хоть что-то знает - например, что у vue есть документация. Тогда можно её открыть и прочитать там про ref:

<q-select
  ref="select"
  ...

<q-btn
  @click="$refs.select.showPopup()"
  ...

Вместо заворачивания ul в transition следует завернуть li в transition-group:

<transition-group tag="ul" name="fade" class="buttons">
  <li
    v-if="какое здесь будет условие, предлагаю подумать самостоятельно"
    ...

Нет необходимости "получать", можно сразу передавать в функцию нужный объект вместо его отдельных свойств.

Почему у элементов радиогрупп отдельные свойства checked? - активным же может быть только один. Пусть checked будет у самих радиогрупп и хранит не логическое значение, а индекс/id/value активного элемента.

Как исполнены сами радиокнопки (кстати, а почему не показали шаблон?)? Если input'ми, используйте v-model вместо того, чтобы вручную обновлять свои данные.

Вот это правильно - не читать документацию.

computed: {
  trimmedNewTodoText() {
    return this.newTodoText.trim();
  },
  ...

addNewTodo() {
  const title = this.trimmedNewTodoText;
  if (title) {
    this.todos.push({
      title,
      ...

<button :disabled="!trimmedNewTodoText">Add</button>

props: {
  user: String
},
emits: ["update:someUser"]

Это неверно. Имя события надо привести в соответствие с именем параметра, исправляем:

- emits: ["update:someUser"]
+ emits: ["update:user"]

- @input="$emit('update:someUser', $event.target.value)"
+ @input="$emit('update:user', $event.target.value)"

data: () => ({
  items: [
    { text:  '69', tooltip:  'hello, world!!' },
    { text: '187', tooltip:  'fuck the world' },
    { text: '666', tooltip: 'fuck everything' },
  ],
}),

<div
  v-for="n in items"
  v-text="n.text"
  :data-tooltip="n.tooltip"
  class="item"
></div>

.item {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: white;
  background: red;
  width: 150px;
  height: 50px;
  margin: 10px;
  position: relative;
}
.item:hover::before {
  content: attr(data-tooltip);
  display: inline-block;
  background: blue;
  color: white;
  position: absolute;
}

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

computed: {
  filteredWorks() {
    const category = this.tabs.find(n => n.id === this.activeTabId)?.category;
    return category равна той, что у 'Все работы'
      ? this.works
      : this.works.filter(n => n.category === category);
  },

<div class="articles__items articles__items--works">
  <img v-for="n in filteredWorks" :key="n.id" :src="n.image">
</div>

tabs: [
  { id: '1', name: 'Все работы', category: 'doors' },
  { id: '2', name: 'Окна', category: 'windows' },
  { id: '3', name: 'Двери', category: 'doors' },

Почему у category одинаковые значения (doors)? Надо исправить.

Что, открыть консоль не догадались? Или открыли и тут же закрыли, придя в ужас от количества красного?

Понадобится функция, которая вложенный массив развернёт в плоский:

const flat = (arr, childrenKey = 'children') =>
  (arr instanceof Array ? arr : []).reduce((acc, n) => (
    acc.push(n, ...flat(n[childrenKey], childrenKey)),
    acc
  ), []);

// или, если нужны копии объектов без ссылок на массивы вложенных объектов:
const flat = (arr, childrenKey = 'children') =>
  Array.isArray(arr)
    ? arr.flatMap(({ [childrenKey]: c, ...n }) => [
        n,
        ...flat(c, childrenKey),
      ])
    : [];

Дальше всё просто - вычисляемое свойство, v-for по его значению:

computed: {
  users() {
    return flat(this.elements);
  },
},

<option v-for="n in users" :key="n.id">{{ n.name }}</option>

<gmap-map
  ref="map"
  ...

const bounds = new google.maps.LatLngBounds();
массивКоординатВашихЛокаций.forEach(n => bounds.extend(n));
this.$refs.map.fitBounds(bounds);

https://codesandbox.io/s/for-https-qna-habr-com-q-...

не хочу дублировать код в v-slot:fastFilters, но как мне сделать так, чтоб по определенному флагу на фильтрах он появлялся и в fastFilters

Дублируйте не снаружи, а внутри - то есть, не контент, передаваемый в слот, а сам слот:

<toolbar>
  <slot name="fastFilters">
  <slot name="filters" v-if="а здесь ваш флаг">
</toolbar>
<div class="filters">
  <slot name="filters">
</div>

https://jsfiddle.net/qphgbv8k/

Не выдумывайте, всё реактивно. Просто вы заменяете массив в хранилище (мутация remove) - после этого в хранилище у вас одни данные, а рендер вы выполняете на основе других.

props: {
  modelValue: {
    type: String,
    default: '',
  },
},
emits: [ 'update:modelValue' ],
setup(props, { emit }) {
  const value = ref('');

  watchEffect(() => value.value = props.modelValue);

  return {
    value,
    onInput: e => emit('update:modelValue', value.value = e.target.value),
  };
},

<input :value="value" @input="onInput">