Рендеринг одного и того же компонента (с синхронизированными данными) дважды на одной странице

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

У меня есть компонент "продукт-фильтр". Этот компонент содержит дочерний компонент product-filter-option, который отображает индивидуальный параметр фильтра (флажок с меткой).

Данные json для экземпляра фильтра продукта выглядят так:

"name": "category",
  "title": "Category",
  "options": [
    {
      "value": "value",
      "label": "Label 1",
      "active": true,
      "amount": 8
    },
    {
      "value": "value2",
      "label": "Label 2",
      "amount": 15
    },
    etc.
  ]

У меня есть несколько экземпляров product-filter (и много экземпляров product-filter-option) на моей странице. Все идет нормально. Теперь я хотел бы отобразить один из моих фильтров (например, данный фильтр категории) несколько раз на моей странице (вид текущего «выделенного» фильтра, который может изменяться во время взаимодействия с пользователем).

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

<filter-component v-if="activefilter"
                                  :name="activefilter.name"
                                  :type="activefilter.type"
                                  :title="activefilter.title"
                                  :tooltip="activefilter.tooltip"
                                  :configuration="activefilter.configuration"
                                  :options="activefilter.options">
        </filter-component>

Таким образом, этот фильтр теперь отображается на моей странице 2 раза (только когда установлено свойство activefilter в приложении vue). Но как вы могли догадаться, при изменении параметра в этом «клонированном» фильтре исходный фильтр не изменяется, поскольку данные не синхронизируются между этими «клонами». Как я могу исправить это с помощью Vue?

Спасибо за вашу помощь!