How to keep the state of one vue component (keep-alive) with different inputs?

Question

Vue.js

There is a component that displays a list of users with whom correspondence was conducted. As well as the second component of the chat for personal correspondence.
When a user is selected, a method is called that passes input parameters (props) to vue-router and opens a component with a chat.

openPrivateUserChat(user) {
                this.$router.push({
                    name: 'PrivateUserChat',
                    params: {user_id: user.id}
                });
            }

In a component with a chat , a request to receive messages is always sent to created():

axios.post('/api/getMessagesForUser', {
                    user_id: this.user_id,                    
                })

Next, the messages are saved to a variable in the chat component.
At the moment there is only one chat component and each time a new one is created due to different input data.
The SPA application, so you only need to send a request to the server once when you first open a chat with any user, and then just save the state of the component through keep-alive .
Is it possible to save the state of one component with different inputs, or make different copies of the component?

Answer 1

Vuex