0xD34F

Добавьте в дочерний компонент эффект, который будет зависеть от props'ов и обновлять состояние:

useEffect(() => setValue(props.value), [ props.value ]);

Это если прямо отвечать на спрошенное. Но действительно ли дочерний компонент должен хранить значение input'а у себя? Возможно, вы не конца понимаете, чего хотите, и вам надо узнать про подъём состояния.

Маркеры сложить в массив, по клику на кнопки доставать из массива маркер с тем же индексом, что и у кнопки, триггерить на нём событие клика. Как-то так.

Документация подсказывает, что есть такая штука, как

onClickCapture: A version of onClick that fires in the capture phase.

Поставьте значение animation-delay в зависимость от индекса в v-for:

v-for="(n, i) in items"
:style="{ 'animation-delay': i * 0.5 + 's' }"

UPD. Вынесено из комментариев:

индекс используется для других целей, там текстовая строка, а не число. В этом и сложность задачи

То есть, данные - это объект, а не массив? Никаких сложностей, всё предусмотрено - v-for для объектов выдаёт три значения, как раз для того, чтобы у свойств тоже мог быть индекс.

function merge($arrs, $idKey, ...$sumKeys) {
  $result = [];

  foreach (array_merge(...$arrs) as $n) {
    $id = $n[$idKey];
    $result[$id] ??= array_merge($n, array_combine($sumKeys, array_fill(0, count($sumKeys), 0)));

    foreach ($sumKeys as $k) {
      $result[$id][$k] += $n[$k];
    }
  }

  return array_values($result);
}


$result = merge($dates1, 'date', 'qty');

Получаем все возможные ключи; под каждый создаём пустой массив; при обработке объекта из исходного массива бежим по массиву ключей, добавляем в соответствующий массив значение из объекта или дефолтное - в зависимости от наличия ключа в объекте:

function groupValues(arr, defaultValue = null) {
  const keys = [...new Set(arr.flatMap(Object.keys))];
  return arr.reduce((acc, n) => {
    keys.forEach(k => acc[k].push(Object.hasOwn(n, k) ? n[k] : defaultValue));
    return acc;
  }, Object.fromEntries(keys.map(k => [ k, [] ])));
}


const result = groupValues(arr);

Или, результирующий объект изначально пуст; при обработке объекта из исходного массива перебираем его ключи; если ключ отсутствует в результирующем объекте, создаём массив с длиной как у исходного, заполняем его дефолтным значением; записываем в массив в результирующем объекте значение под тем же индексом, который имеет обрабатываемый объект в исходном массиве:

const groupValues = (arr, defaultValue = null) =>
  arr.reduce((acc, n, i, a) => (
    Object.keys(n).forEach(k =>
      (acc[k] ??= Array(a.length).fill(defaultValue))[i] = n[k]
    ),
    acc
  ), {});

Внутри компонента:

<select>
  <template v-for="n in options">
    <option>
      <slot name="option" :option="n">{{ n }}</slot>
    </option>
  </template>
</select>

Снаружи:

<v-select :options="countries">
  <template #option="{ option }">{{ option.name }}</template>
</v-select>

https://jsfiddle.net/w6nuzamx/

fitBounds:

// это массив ваших "точек"
const locations = [
  { lat: ..., lng: ... },
  { lat: ..., lng: ... },
  ...
];

const onLoad = map => {
  const bounds = new window.google.maps.LatLngBounds();
  locations.forEach(n => bounds.extend(n));
  map.fitBounds(bounds);
};

<GoogleMap
  onLoad={onLoad}
  ...
>
  {locations.map(n => <Marker position={n} />)}
</GoogleMap>

const useChunked = (data, chunkSize) =>
  useMemo(
    () => Array.prototype.reduce.call(
      data,
      (acc, n, i) => ((acc[i / chunkSize | 0] ??= []).push(n), acc),
      []
    ),
    [ data, chunkSize ]
  );

const ChunkedListItem = ({ item }) =>
  <pre>{JSON.stringify(item, null, 2)}</pre>;

const ChunkedList = ({ items, inRow, Item = ChunkedListItem }) => {
  const rows = useChunked(items, inRow);

  return (
    <div className="chunked-list">
      {rows.map(row => (
        <ul>
          {row.map(n => <li><Item item={n} /></li>)}
        </ul>
      ))}
    </div>
  );
}

https://jsfiddle.net/7pq92ud8/1/

Правильно так, как вам удобно.

А ещё, чтобы научиться делать правильно, надо сперва сделать неправильно.

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

Если в реализованном что-то не устраивает, всегда можно оформить вопрос (конечно, сперва погуглив) - вот есть такой-то компонент, решает такую-то задачу, мне в нём не нравится то-то и то-то, какие есть способы сделать лучше?

Когда решите таким образом задач сорок-пятьдесят, начнёт приходить понимание, как делать правильно.

Сделайте отдельный компонент, который будет принимать getDayinLoop(worker.wrdays, mday) как параметр.

Если говорить именно о передаче событий, то гуглите, что такое шина событий. Но вообще, стоит подумать, а правда ли оно вам надо. Возможно, ваша задача может быть решена иначе:

Первый компонент - внутри emit, снаружи обработчик события.

Второй компонент - внутри watch на параметр, снаружи привязка значения этого параметра (значение обновляется в обработчике события первого компонента); или, внутри метод, снаружи ref (вызываете метод в обработчике события первого компонента).

vue3-mq

this.$mq

Что по этому поводу имеет сказать документация:

$mq has been removed as a global property and must now be injected into components that require it

Изменить отображаемый формат даты можно через соответствующий параметр компонента.

Иконки убираются с помощью css.

"Плейсхолдер" делается через дополнительную обёртку (UPD. Или его можно оформить как кастомную иконку).

(click)="openLink($event, item.key)" ---> (click)="item.isOpen = !item.isOpen"

[class.open]="item.key == activeSelection" ---> [class.open]="item.isOpen"

const createTopic = () => ({
  text: '',
  subtopics: [ createSubTopic() ],
});

const createSubTopic = () => ({
  text: '',
});

const topics = reactive([ createTopic() ]);

<div v-for="(topic, iTopic) in topics">
  <div>
    <div>
      Topic #{{ iTopic + 1 }}:
      <input v-model="topic.text">
    </div>
    <div v-for="(subtopic, iSubtopic) in topic.subtopics">
      Subtopic #{{ iTopic + 1 }}.{{ iSubtopic + 1 }}:
      <input v-model="subtopic.text">
      <button v-if="iSubtopic" @click="topic.subtopics.splice(iSubtopic, 1)">x</button>
    </div>
  </div>
  <button @click="topic.subtopics.push(createSubTopic())">Add subtopic</button>
</div>
<button @click="topics.push(createTopic())">Add topic</button>

const [ items, setItems ] = useState([]);
const [ src, setSrc ] = useState('');

const onChange = e => {
  setSrc(e.target.value);
};

const onClick = () => {
  setSrc('');
  setItems([
    ...items,
    {
      id: 1 + Math.max(0, ...items.map(n => n.id)),
      src,
    },
  ]);
};

const onSortEnd = (iOld, iNew) => {
  setItems(([...items]) => (
    items.splice(iNew, 0, items.splice(iOld, 1)[0]),
    items
  ));
};

<div>
  <input value={src} onChange={onChange} />
  <button onClick={onClick}>add</button>
</div>
<SortableList onSortEnd={onSortEnd}>
  {items.map(n => (
    <SortableItem key={n.id}>
      <img src={n.src} />
    </SortableItem>
  ))}
</SortableList>

from collections import Counter

def how_many_times_can_word_be_made_from_string(word, string):
  count_w = Counter(word)
  count_s = Counter(string)
  return min(count_s[k] // v for k, v in count_w.items())