watch all props

[Qanah]

Please check my pull request

[MatheusrdSantos]

Hi, could you explain what you have implemented or fixed in this pull request?

[MatheusrdSantos]

I reviewed your changes, but I didn't understand why to watch all the props.

[Qanah]

imagine you want to implement web WhatsApp then your chat object will be like this

selectedChat: {
        id: 1,
        title: 'My chat title',
        participants: [ ... ],
        messages: [ ... ]
},
chats: [
      {
        id: 1,
        title: 'My first chat title',
        participants: [ ... ],
        messages: [ ... ]
      },
      {
        id: 2,
        title: 'My sacand chat title',
        participants: [ ... ],
        messages: [ ... ]
      },
]

<Chat
          v-if="selectedChat.id"
          :myself="myself"
          :chat-title="selectedChat.title"
          :participants="selectedChat.participants"
          :messages="selectedChat.messages"
          :on-type="onType"
          :on-message-submit="onMessageSubmit"
          :placeholder="placeholder"
          :colors="colors"
          :border-style="borderStyle"
          :hide-close-button="hideCloseButton"
          :close-button-icon-size="closeButtonIconSize"
          :submit-icon-size="submitIconSize"
          :load-more-messages="toLoad.length > 0 ? loadMoreMessages : null"
          :async-mode="asyncMode"
        />

for placeholder you can use it to i18n

[Tofandel]

While this does make sense, it is not needed in your case

To reload a vue component and all it's lifecycle you should have just used the key prop Eg:

<Chat
          v-if="selectedChat.id"
          :key="selectedChat.id"
...
 />

This would have done what you were looking for, watching the props might create data overlap problems in the long run in the vuex store, but it does make sense to have the data update if the prop changes (as it normally does with vue)

So I agree with this PR

[MatheusrdSantos]

I've reproduced the error. The @Tofandel's solution is easier to implement and worked pretty fine for me. However, we could have some other problems when using this solution :key="selectedChat.id". Because if you have only one chat and want to change just the chat title, the component won't update since the chat id still the same.

So I'll accept this PR and let the component watch its properties.