Как из полученного объекта вытащить ключ и значение?

Надо было сразу написать формат данных который нужен на выходе

let url = 'https://jsonplaceholder.typicode.com/users';

async function getUsers(url) {
  const response = await fetch(url)
  const result = await response.json()
  const usersID = result.reduce((acc, item) => {
    const { id } = item;
    acc.push({['id']: id}) 
    return acc
  }, [])
  console.log(usersID)
}

getUsers(url)

Как из полученного объекта вытащить ключ и значение?

Обращайся.
Если подошло - отметь мой ответ решением.

Какой алгоритм действий предпринять для предотвращения повторений в объекте?

const arr = [
    {
        contry: 'Russia',
        name: 'Alex',
        age: '34',
    },
    {
        contry: 'Russia',
        name: 'July',
        age: '22',
    },
    {
        contry: 'USA',
        name: 'Tom',
        age: '32',
    },
    {
        contry: 'USA',
        name: 'Jack',
        age: '74',
    },
]

arr.reduce((acc, item) => {
  const { contry, name, age } = item;
  if(!acc.hasOwnProperty(contry)) acc[contry] = [{[name]:age}];
  else acc[contry] = acc[contry].concat({[name]: age})
  return acc
}, {})

Какой алгоритм действий предпринять для предотвращения повторений в объекте?

С помощью reduce пробегаемся по элементам массива и проверяем значение contry - если в результирующем объекте (обрати внимание редьюсу вторым аргументом назначаем {} в качестве аккумулятора) нет свойства с таким ключом - добавляем и ставим значением объект с именем(ключ) и возрастом(значение). Если свойство имеется то добавляем в объект (вообще-то копируем но не суть) новое свойство с именем и возрастом.

В более сложных случаях (если изменяются поля объектов в массиве) нужна будет корректировка, но смысл останется тот же.

Как вывести данные из fetch?

В вопросе ты спрашивал как вывести в консоль - вот так.
В данном случае result это и есть массив, дальше делаешь с ним что тебе нужно(мапишь в li, оборачиваешь в дивы, вставляешь в DOM) но ВНУТРИ асинхронной функции, а не снаружи.

Как изменить значение у обоих компонентов?

Ну либо сделать им общего родителя со стейтом для отслеживания изменений и передачи его в компоненты через пропсы, либо подключить стор (допустим Redux) и уже в нем менять состояние

Как удалить повторяющиеся элементы и сложить их кол-во и название в новый массив?

В тегах может стоять имя левой тёти - это ничего не значит. В вопросе ни слова про computed, vue, роутинг...
Просто массив объектов и просьба их преобразовать - сделано. Можешь не благодарить.

Как удалить повторяющиеся элементы и сложить их кол-во и название в новый массив?

Andrey Vasilev, это не почти - это точный ответ на твой вопрос, в котором не было ни слова про vue и роутинг

Как сверстать такой элемент?

Через псевдоэлемент
::before