Vue: как сделать примитивную опору реактивной (должно обновляться при изменении в родительском компоненте)

Я начал небольшое обсуждение в этом сообщении: vue: как сделать объект, переданный компоненту, реактивным? в разделе комментариев.

(Спасибо @DecadeMoon, который пытался мне помочь...)

Из-за ограниченных возможностей в поле комментариев я начинаю новую тему здесь:

Проблема У меня есть форма, в которой есть несколько пустых полей ввода при загрузке. Форма устанавливает фильтр для пользовательского интерфейса. Параметры фильтров «сохраняются» в URL, что позволяет поделиться определенной настройкой фильтра.

domain.com?filter1=value1&filter2=value2

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

Моя проблема в том, что мои поля ввода должны быть «заполнены» значениями из URL.

Итак, у меня есть следующий информационный путь:

 1. filter is initiated with empty fields
 2. Check url params
 3. save url filter to vuex store
 4. parent component (form) receives set filter
 5. parent component should update it's child (input field)

Но позвольте мне поделиться некоторым кодом, чтобы проиллюстрировать это больше:

// FilterForm.vue

...
props: {
    fields: {
    //  contain also the information about the value of a field
    // is being passed down as a prop of its parent, which watches the vuex store
      type: Array,
      required: true,
    },
  },
...
</script>

<template>
...
<template v-for="(field, index) in fields">
<FormFieldText
  if="field.type === 'text'"
  :key="index"
  v-model="formData[field.name]"
  :value="field.value" <------------
/>
...

В моем инспекторе vue я вижу, что данные в FormFieldText обновляются: (сначала, конечно, это значение пустое, а затем значение URL-адреса передается здесь.)

Теперь, поскольку field.value привязано к шаблону: :value="field.value" я ожидаю, что значение дочернего элемента будет обновляться всякий раз, когда изменяется field.value (String).

Это не тот случай.

// FormFieldText.vue

export default {
  name: 'FormFieldText',
  props: {
    value: { <------------
      type: String,
      required: false,
      default: '',
    },
...
</script>

<template>
  ...
      <input
        type="text"
        :value="value" <------------
        @input="$emit('input', $event.target.value)"
      />
    </label>
...
</template>

Я тоже пытался смотреть value, но и этот вотчер никогда не выполняется.

watch: {
    value: {
      handler(newValue) {
        console.log('newValue: ', newValue)
      },
    },
  },

Итак, как я мог добиться следующего:

1. Родитель инициирует дочерний элемент с пустым значением
2. Родитель получает от своего родителя обновление данных
3. Родитель должен передать эту информацию ребенку.
4. Ребенок должен обновить свой пользовательский интерфейс (показывая значение в поле ввода).

Надеюсь, я более-менее разобрался со своей проблемой. Если что-то останется неясным, буду рад уточнить.

Спасибо за любой вклад. Ваше здоровье