0xD34F

Добавить в options interpolateNulls: true.

https://jsfiddle.net/duja84ys/

data: () => ({
  headers: [
    { key:       'name', label:       'ФИО' },
    { key: 'department', label:     'Отдел' },
    { key:   'position', label: 'Должность' },
    { key:   'hostname', label:    'Имя ПК' },
    { key:   'username', label:    'Учётка' },
  ],
  ...

<thead>
  <tr>
    <th v-for="n in headers">{{ n.label }}</th>
  </tr>
</thead>
<tbody>
  <tr v-for="employee in employees">
    <td v-for="n in headers" :data-label="n.label">{{ employee[n.key] }}</td>
  </tr>
</tbody>

<label>
  Город:
  <select id="city"></select>
</label>
<label>
  Линия:
  <select id="line"></select>
</label>
<label>
  Станция:
  <select id="station"></select>
</label>

fetch('https://api.hh.ru/metro/').then(r => r.json()).then(subwayData => {
  const city = document.querySelector('#city');
  const line = document.querySelector('#line');
  const station = document.querySelector('#station');

  const getLines = () => subwayData[city.value].lines;
  const update = (el, data) => {
    el.replaceChildren(...data.map((n, i) => new Option(n.name, i)));
    el.dispatchEvent(new Event('change'));
  };

  city.addEventListener('change', () => update(line, getLines()));
  line.addEventListener('change', () => update(station, getLines()[line.value].stations));

  update(city, subwayData);
});

.inputmask('aa\\|9999',

выводит не совсем то что мне надо

Вместо array.length надо крутить цикл до array.length - n + 1.

А вообще, цикл в явном виде не нужен:

const bullshitChunks = (arr, chunkSize) =>
  Array.from(
    { length: arr.length - chunkSize + 1 },
    (n, i) => arr.slice(i, i + chunkSize)
  );


console.log(bullshitChunks([ 1, 2, 3, 4, 5, 6, 7 ], 4));
console.log(bullshitChunks('abcdefg', 5));

const el = useRef();

useEffect(() => {
  const onClick = e => {
    const dropdown = e.target.closest('.dropdown');
    if (dropdown && dropdown !== el.current) {
      setIsVisible(false);
    }
  };

  document.addEventListener('click', onClick);

  return () => {
    document.removeEventListener('click', onClick);
  };
}, []);

<div className="dropdown" ref={el}>

data: () => ({
  columns: [
    { field: '...', label: '...' },
    { field: '...', label: '...' },
    ...
  ],
  focused: {},
  ...
}),
methods: {
  rowStyle(row) {
    return row === this.focused.record && {
      backgroundColor: 'red',
    };
  },
  cellStyle(row, cell) {
    return cell.name === this.columns[this.focused.colPos]?.field && {
      backgroundColor: 'orange',
    };
  },
},

<vue-excel-editor
  :row-style="rowStyle"
  :cell-style="cellStyle"
  @cell-focus="focused = $event"
  ...
>
  <vue-excel-column
    v-for="n in columns"
    v-bind="n"
    :key="n.field"
  />
</vue-excel-editor>

Помимо массива с данными держите в стейте ссылку на следующую страницу:

state: {
  pokemons: [],
  next: 'https://pokeapi.co/api/v2/pokemon',
},

Используйте её для запроса данных, при получении ответа не забывайте сохранять новую ссылку:

actions: {
  async fetchPokemons({ state, commit }) {
    const data = await fetch(state.next).then(r => r.json());

    commit('setPokemons', {
      pokemons: data.results,
      next: data.next,
    });
  }
},

Также можете использовать значение этой ссылки для блокирования кнопки, по нажатию на которую инициируется загрузка следующей порции данных, если больше загружать нечего:

<button
  :disabled="!$store.state.next"
  @click="$store.dispatch('fetchPokemons')"
>
  NEXT
</button>

https://jsfiddle.net/yb2seq6m/

Но вообще, никакая "следующая" страница тут не нужна. Храните номер текущей страницы и количество элементов на странице, исходя из этих данных самостоятельно вычисляйте значение параметра offset. Когда понадобится следующая - делаете +1 к текущей. Например.

Добавить блоку с текстом

white-space: nowrap;
position: absolute;

https://jsfiddle.net/b5koa7dm/

Добавляем в массив копию исходного объекта:

const defaultAnimals = {
  cat: '',
  dog: '',
  mouse: '',
  rhinoceros: '',
};

const animalsReducer = (state, action) => {
  switch (action.type) {
    case 'updateObj':
      return {
        ...state,
        obj: {
          ...state.obj,
          [action.payload.name]: action.payload.value,
        },
      };

    case 'addObjToArr':
      return {
        ...state,
        arr: [ ...state.arr, state.obj ],
        obj: defaultAnimals,
      };

    default:
      return state;
  }
};

const Animals = () => {
  const [ animals, dispatch ] = useReducer(animalsReducer, {
    obj: defaultAnimals,
    arr: [],
  });

  const onChange = ({ target: { name, value } }) => {
    dispatch({
      type: 'updateObj',
      payload: { name, value },
    });
  };
  
  const onSubmit = e => {
    e.preventDefault();
    dispatch({
      type: 'addObjToArr',
    });
  };

  return (
    <div>
      <form onSubmit={onSubmit}>
        {Object.entries(animals.obj).map(([ k, v ]) => (
          <div key={k}>
            <label>
              {k}:
              <input name={k} value={v} onChange={onChange} />
            </label>
          </div>
        ))}
        <button>Save</button>
      </form>
      <pre>{JSON.stringify(animals.obj, null, 2)}</pre>
      <pre>{JSON.stringify(animals.arr, null, 2)}</pre>
    </div>
  );
};

Или, добавляем в массив объект, содержащий значение только одного из свойств исходного объекта:

const animalsReducer = (state, action) => {
  switch (action.type) {
    case 'updateObj':
      return {
        ...state,
        obj: {
          ...state.obj,
          [action.payload.name]: action.payload.value,
        },
      };

    case 'addObjToArr':
      return {
        ...state,
        arr: [
          ...state.arr,
          {
            animal: action.payload,
            name: state.obj[action.payload],
          },
        ],
      };

    default:
      return state;
  }
};

const Animals = () => {
  const [ { obj, arr }, dispatch ] = useReducer(animalsReducer, {
    obj: {
      cat: '',
      dog: '',
      mouse: '',
      rhinoceros: '',
    },
    arr: [],
  });

  const onChange = ({ target: { name, value } }) => {
    dispatch({
      type: 'updateObj',
      payload: { name, value },
    });
  };
  
  const onSubmit = (e, animal) => {
    e.preventDefault();
    dispatch({
      type: 'addObjToArr',
      payload: animal,
    });
  };

  return (
    <div>
      {Object.entries(obj).map(([ k, v ]) => (
        <form onSubmit={e => onSubmit(e, k)} key={k}>
          {k}:
          <input name={k} value={v} onChange={onChange} />
          <button>Save</button>
        </form>
      ))}
      <pre>{JSON.stringify(obj, null, 2)}</pre>
      <pre>{JSON.stringify(arr, null, 2)}</pre>
    </div>
  );
};

[ ' '.join(sum(a, [])) ]

components: {
  componentName: () => import('...').then(component => {
    console.log(component.default.props);
    return component;
  }),
  ...
},

(entities[currentBrand] ?? []).map(n => (
  <ListItem>
    {n.icon}
    {n.label}
  </ListItem>
))

const getNestedValues = (arr, nestedKey, valKey) =>
  Array.isArray(arr)
    ? arr.flatMap(n => [ n[valKey], ...getNestedValues(n[nestedKey], nestedKey, valKey) ])
    : [];


const values = getNestedValues(arr, 'evolves_to', 'species');

Работает. Удалять только бывает нечего. С чего вы взяли, что позиции элементов и их id в массивах elementData и selectedElArr будут совпадать? Индекс надо не передавать в метод, а вычислять самостоятельно внутри:

methods: {
  toggleElement(id) {
    const index = this.selectedElArr.indexOf(id);
    if (index !== -1) {
      this.selectedElArr.splice(index, 1);
    } else {
      this.selectedElArr.push(id);
    }
  },
  ...

@click="toggleElement(data.id)"

const selectors = [ '.addservice', '.addprice' ];
const data = Array.from(
  document.querySelectorAll('.addserviceBlock'),
  n => selectors.map(m => n.querySelector(m).value)
);

Заголовки и будущее меню:

const headers = document.querySelectorAll('section > h2');
const menu = document.querySelector('что здесь должно быть, понятия не имею, сами разберётесь');

Собираем меню:

menu.innerHTML = Array
  .from(headers, n => `<a href="#${n.parentNode.id}">${n.innerHTML}</a>`)
  .join('');

или

for (const { parentNode: p, textContent: t } of headers) {
  menu.insertAdjacentHTML(
    'beforeend',
    '<a href="#' + p.getAttribute('id') + '">' + t + '</a>'
  );
}

или

menu.append(...Array.prototype.map.call(headers, n => {
  const a = document.createElement('a');
  a.href = '#'.concat(n.parentNode.attributes.id.value);
  a.innerText = n.innerText;
  return a;
}));

или

headers.forEach(({ parentNode: { outerHTML } }) => {
  const a = document.createElement('a');
  a.setAttribute('href', outerHTML.match(/id="(.*?)"/).pop().replace(/^/, '#'));
  a.appendChild(document.createTextNode(outerHTML.match(/h2>(.*)<\/h2/)[1]));
  menu.insertAdjacentElement('beforeend', a);
});