Как заставить перемапить данные внутри компонента Vue?
Всем привет!
Допустим я получаю такой массив с сервера:
const persons = [{ name: 'Вася', job: 'Менеджер', age: 45 }, { name: 'Петя', job: 'Логист', age: 40 }
Далее я делаю v-for данного массива и передаю пропсом каждый элемент внутрь компонента
<person v-for="person in persons" :key="person.name" :person="person"/>
Далее внутри компонента в хуке created я делаю маппинг для person, для того чтобы потом уже смапенные, красивые данные вставить в разметку, то есть в created делаю что-то типо:
this.mappedPerson = person.map((item) => { ...item, name: 'Прекрасная должность + person.job', age: 'Прекрасный возраст + person.job', }
Ну и далее эти данные вставляю в разметку. Все вроде ок. Я получил сырые данные в компонент, при создании компонента смаппил эти данные в нужный себе формат и вывел пользователю.
А далее я беру и редактирую данные своего person, отправляю запрос на сервер, сервер мне возвращает обновленный объект person, я его в store с помощью commit добавляю в список person, но в компоненте ничего не происходит! Я жду, что так как данные person изменились, произойдет перерендер компонента, в который я передаю этот person, соответственно в моем компоненте person снова вызовется маппинг данных. Но компонент не перерендеривается, created не срабатывает.
Как в таких ситуациях заставить весь компонент заново смаппить переданные ему пропсы?