VueX state is updated, but computed property in Vue doesn't update objects or arrays when they have new properties added or removed.

[MalikKilgore]

• possibly need explicit keys
• cloud function to give each message a unique key (maybe)
• different method (watchers, getters/setters, plain vue method)

[MalikKilgore]

Can probably make msgList an empty array. Push all the doc.content to that array. Commit the array to the mutation.

Within the mutation, cycle through the array and push those items to the state. This should make it so the state can be overwritten all the time, without having to manually reset it to being empty.

[MalikKilgore]

Using code similar to below. Use a UL in Message.vue, and append doc.content as list items. Can loop through to remove all list items everytime renderDOM() initiates.

const div = document.createElement('div') div.classList.add('message') div.innerHTML =${doc.data()} div.innerHTML =${doc.data().content} document.getElementById(chat-messages).appendChild(div)

src/store/index.js

[MalikKilgore]

This issue has been fixed by focusing on just using the Firebase snapshot listener.