How to properly filter an array from state?

Question

Vue.js

I need to filter an array.
First, all the data from the array is displayed, and after that, if you click on "Missed" then we should only see them (in the array it is type = "fail")
I understand that I have an array in the array, etc., and I found a way raise inside the array.

.calls__filter
    p(@click="fillterIt") Исходящие
        .calls__information(v-for="item in calls" :key="item.date")
            .calls__information-date
                p {{item.date}}
            .calls__information-main(v-for="person in item.persons" :key="person.name")
                .calls__information-calls(v-for="call in person.calls")
                    p {{call.number}}
                    p {{call.time}}

fillterIt() {
            let persons = this.calls.flatMap(i => i.persons)
            let allCalls = persons.flatMap(i => i.calls)
            let newOut = allCalls.filter(item => item.type == 'out')
            this.calls = newOut // тут у меня ошибка мутации 
            // calls - это пропс с массивом. внутри которого есть еще persons, а уже внутри persons есть еще один calls где и лежит type
            // выдаст только calls типа out
        }

The question is how to make the display of the necessary data (a la filter) without changing the state data?
Screenshot for concept:

Answer 1

https://jsfiddle.net/Lvknuta1/