feat: Vite + vue 3 💚 (#10047)

Fixes https://github.com/chatwoot/chatwoot/issues/8436 Fixes https://github.com/chatwoot/chatwoot/issues/9767 Fixes https://github.com/chatwoot/chatwoot/issues/10156 Fixes https://github.com/chatwoot/chatwoot/issues/6031 Fixes https://github.com/chatwoot/chatwoot/issues/5696 Fixes https://github.com/chatwoot/chatwoot/issues/9250 Fixes https://github.com/chatwoot/chatwoot/issues/9762 --------- Co-authored-by: Pranav <pranavrajs@gmail.com> Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
2024-10-02 13:06:30 +05:30
parent e0bf2bd9d4
commit 42f6621afb
661 changed files with 15939 additions and 31194 deletions
--- a/app/javascript/dashboard/store/modules/agentBots.js
+++ b/app/javascript/dashboard/store/modules/agentBots.js
@@ -1,4 +1,3 @@
-import Vue from 'vue';
 import * as MutationHelpers from 'shared/helpers/vuex/mutationHelpers';
 import types from '../mutation-types';
 import AgentBotsAPI from '../../api/agentBots';
@@ -146,7 +145,10 @@ export const mutations = {
  [types.EDIT_AGENT_BOT]: MutationHelpers.update,
  [types.DELETE_AGENT_BOT]: MutationHelpers.destroy,
  [types.SET_AGENT_BOT_INBOX]($state, { agentBotId, inboxId }) {
-    Vue.set($state.agentBotInbox, inboxId, agentBotId);
+    $state.agentBotInbox = {
+      ...$state.agentBotInbox,
+      [inboxId]: agentBotId,
+    };
  },
 };

--- a/app/javascript/dashboard/store/modules/auth.js
+++ b/app/javascript/dashboard/store/modules/auth.js
@@ -1,4 +1,3 @@
-import Vue from 'vue';
 import types from '../mutation-types';
 import authAPI from '../../api/auth';

@@ -208,29 +207,29 @@ export const mutations = {
      }
      return account;
    });
-    Vue.set(_state, 'currentUser', {
+    _state.currentUser = {
      ..._state.currentUser,
      accounts,
-    });
+    };
  },
  [types.CLEAR_USER](_state) {
    _state.currentUser = initialState.currentUser;
  },
  [types.SET_CURRENT_USER](_state, currentUser) {
-    Vue.set(_state, 'currentUser', currentUser);
+    _state.currentUser = currentUser;
  },
  [types.SET_CURRENT_USER_UI_SETTINGS](_state, { uiSettings }) {
-    Vue.set(_state, 'currentUser', {
+    _state.currentUser = {
      ..._state.currentUser,
      ui_settings: {
        ..._state.currentUser.ui_settings,
        ...uiSettings,
      },
-    });
+    };
  },

  [types.SET_CURRENT_USER_UI_FLAGS](_state, { isFetching }) {
-    Vue.set(_state, 'uiFlags', { isFetching });
+    _state.uiFlags = { isFetching };
  },
 };

--- a/app/javascript/dashboard/store/modules/contactConversations.js
+++ b/app/javascript/dashboard/store/modules/contactConversations.js
@@ -1,4 +1,3 @@
-import Vue from 'vue';
 import * as types from '../mutation-types';
 import ContactAPI from '../../api/contacts';
 import ConversationApi from '../../api/conversations';
@@ -135,7 +134,10 @@ export const mutations = {
    };
  },
  [types.default.SET_CONTACT_CONVERSATIONS]: ($state, { id, data }) => {
-    Vue.set($state.records, id, data);
+    $state.records = {
+      ...$state.records,
+      [id]: data,
+    };
  },
  [types.default.ADD_CONTACT_CONVERSATION]: ($state, { id, data }) => {
    const conversations = $state.records[id] || [];
@@ -151,10 +153,14 @@ export const mutations = {
      updatedConversations.push(data);
    }

-    Vue.set($state.records, id, updatedConversations);
+    $state.records = {
+      ...$state.records,
+      [id]: updatedConversations,
+    };
  },
  [types.default.DELETE_CONTACT_CONVERSATION]: ($state, id) => {
-    Vue.delete($state.records, id);
+    const { [id]: deletedRecord, ...remainingRecords } = $state.records;
+    $state.records = remainingRecords;
  },
 };

--- a/app/javascript/dashboard/store/modules/contactLabels.js
+++ b/app/javascript/dashboard/store/modules/contactLabels.js
@@ -1,4 +1,3 @@
-import Vue from 'vue';
 import types from '../mutation-types';
 import ContactAPI from '../../api/contacts';

@@ -62,7 +61,6 @@ export const actions = {
      throw new Error(error);
    }
  },
-
  setContactLabel({ commit }, { id, data }) {
    commit(types.SET_CONTACT_LABELS, { id, data });
  },
@@ -76,7 +74,10 @@ export const mutations = {
    };
  },
  [types.SET_CONTACT_LABELS]: ($state, { id, data }) => {
-    Vue.set($state.records, id, data);
+    $state.records = {
+      ...$state.records,
+      [id]: data,
+    };
  },
 };

--- a/app/javascript/dashboard/store/modules/contactNotes.js
+++ b/app/javascript/dashboard/store/modules/contactNotes.js
@@ -1,5 +1,4 @@
 import types from '../mutation-types';
-import Vue from 'vue';
 import ContactNotesAPI from '../../api/contactNotes';

 export const state = {
@@ -68,7 +67,10 @@ export const mutations = {
  },

  [types.SET_CONTACT_NOTES]($state, { data, contactId }) {
-    Vue.set($state.records, contactId, data);
+    $state.records = {
+      ...$state.records,
+      [contactId]: data,
+    };
  },
  [types.ADD_CONTACT_NOTE]($state, { data, contactId }) {
    const contactNotes = $state.records[contactId] || [];
--- a/app/javascript/dashboard/store/modules/contacts/mutations.js
+++ b/app/javascript/dashboard/store/modules/contacts/mutations.js
@@ -1,4 +1,3 @@
-import Vue from 'vue';
 import types from '../../mutation-types';

 export const mutations = {
@@ -10,32 +9,32 @@ export const mutations = {
  },

  [types.CLEAR_CONTACTS]: $state => {
-    Vue.set($state, 'records', {});
-    Vue.set($state, 'sortOrder', []);
+    $state.records = {};
+    $state.sortOrder = [];
  },

  [types.SET_CONTACT_META]: ($state, data) => {
    const { count, current_page: currentPage } = data;
-    Vue.set($state.meta, 'count', count);
-    Vue.set($state.meta, 'currentPage', currentPage);
+    $state.meta.count = count;
+    $state.meta.currentPage = currentPage;
  },

  [types.SET_CONTACTS]: ($state, data) => {
    const sortOrder = data.map(contact => {
-      Vue.set($state.records, contact.id, {
+      $state.records[contact.id] = {
        ...($state.records[contact.id] || {}),
        ...contact,
-      });
+      };
      return contact.id;
    });
    $state.sortOrder = sortOrder;
  },

  [types.SET_CONTACT_ITEM]: ($state, data) => {
-    Vue.set($state.records, data.id, {
+    $state.records[data.id] = {
      ...($state.records[data.id] || {}),
      ...data,
-    });
+    };

    if (!$state.sortOrder.includes(data.id)) {
      $state.sortOrder.push(data.id);
@@ -43,26 +42,22 @@ export const mutations = {
  },

  [types.EDIT_CONTACT]: ($state, data) => {
-    Vue.set($state.records, data.id, data);
+    $state.records[data.id] = data;
  },

  [types.DELETE_CONTACT]: ($state, id) => {
    const index = $state.sortOrder.findIndex(item => item === id);
-    Vue.delete($state.sortOrder, index);
-    Vue.delete($state.records, id);
+    $state.sortOrder.splice(index, 1);
+    $state.records[id] = null;
  },

  [types.UPDATE_CONTACTS_PRESENCE]: ($state, data) => {
    Object.values($state.records).forEach(element => {
      const availabilityStatus = data[element.id];
      if (availabilityStatus) {
-        Vue.set(
-          $state.records[element.id],
-          'availability_status',
-          availabilityStatus
-        );
+        $state.records[element.id].availability_status = availabilityStatus;
      } else {
-        Vue.delete($state.records[element.id], 'availability_status');
+        $state.records[element.id].availability_status = null;
      }
    });
  },
--- a/app/javascript/dashboard/store/modules/conversationLabels.js
+++ b/app/javascript/dashboard/store/modules/conversationLabels.js
@@ -1,4 +1,3 @@
-import Vue from 'vue';
 import * as types from '../mutation-types';
 import ConversationAPI from '../../api/conversations';

@@ -80,12 +79,15 @@ export const mutations = {
    };
  },
  [types.default.SET_CONVERSATION_LABELS]: ($state, { id, data }) => {
-    Vue.set($state.records, id, data);
+    $state.records = { ...$state.records, [id]: data };
  },
  [types.default.SET_BULK_CONVERSATION_LABELS]: ($state, conversations) => {
+    const updatedRecords = { ...$state.records };
    conversations.forEach(conversation => {
-      Vue.set($state.records, conversation.id, conversation.labels);
+      updatedRecords[conversation.id] = conversation.labels;
    });
+
+    $state.records = updatedRecords;
  },
 };

--- a/app/javascript/dashboard/store/modules/conversationMetadata.js
+++ b/app/javascript/dashboard/store/modules/conversationMetadata.js
@@ -1,4 +1,3 @@
-import Vue from 'vue';
 import * as types from '../mutation-types';

 const state = {
@@ -15,7 +14,7 @@ export const actions = {};

 export const mutations = {
  [types.default.SET_CONVERSATION_METADATA]: ($state, { id, data }) => {
-    Vue.set($state.records, id, data);
+    $state.records = { ...$state.records, [id]: data };
  },
 };

--- a/app/javascript/dashboard/store/modules/conversationPage.js
+++ b/app/javascript/dashboard/store/modules/conversationPage.js
@@ -1,4 +1,3 @@
-import Vue from 'vue';
 import * as types from '../mutation-types';

 const state = {
@@ -41,14 +40,23 @@ export const actions = {

 export const mutations = {
  [types.default.SET_CURRENT_PAGE]: ($state, { filter, page }) => {
-    Vue.set($state.currentPage, filter, page);
+    $state.currentPage = {
+      ...$state.currentPage,
+      [filter]: page,
+    };
  },
  [types.default.SET_CONVERSATION_END_REACHED]: ($state, { filter }) => {
    if (filter === 'all') {
-      Vue.set($state.hasEndReached, 'unassigned', true);
-      Vue.set($state.hasEndReached, 'me', true);
+      $state.hasEndReached = {
+        ...$state.hasEndReached,
+        unassigned: true,
+        me: true,
+      };
    }
-    Vue.set($state.hasEndReached, filter, true);
+    $state.hasEndReached = {
+      ...$state.hasEndReached,
+      [filter]: true,
+    };
  },
  [types.default.CLEAR_CONVERSATION_PAGE]: $state => {
    $state.currentPage = {
--- a/app/javascript/dashboard/store/modules/conversationStats.js
+++ b/app/javascript/dashboard/store/modules/conversationStats.js
@@ -1,4 +1,3 @@
-import Vue from 'vue';
 import types from '../mutation-types';
 import ConversationApi from '../../api/inbox/conversation';

@@ -38,9 +37,9 @@ export const mutations = {
      all_count: allCount,
    } = {}
  ) {
-    Vue.set($state, 'mineCount', mineCount);
-    Vue.set($state, 'allCount', allCount);
-    Vue.set($state, 'unAssignedCount', unAssignedCount);
+    $state.mineCount = mineCount;
+    $state.allCount = allCount;
+    $state.unAssignedCount = unAssignedCount;
  },
 };

--- a/app/javascript/dashboard/store/modules/conversationTypingStatus.js
+++ b/app/javascript/dashboard/store/modules/conversationTypingStatus.js
@@ -1,4 +1,3 @@
-import Vue from 'vue';
 import * as types from '../mutation-types';
 import ConversationAPI from '../../api/inbox/conversation';
 const state = {
@@ -43,7 +42,10 @@ export const mutations = {
      record => record.id === user.id && record.type === user.type
    ).length;
    if (!hasUserRecordAlready) {
-      Vue.set($state.records, conversationId, [...records, user]);
+      $state.records = {
+        ...$state.records,
+        [conversationId]: [...records, user],
+      };
    }
  },
  [types.default.REMOVE_USER_TYPING_FROM_CONVERSATION]: (
@@ -54,7 +56,10 @@ export const mutations = {
    const updatedRecords = records.filter(
      record => record.id !== user.id || record.type !== user.type
    );
-    Vue.set($state.records, conversationId, updatedRecords);
+    $state.records = {
+      ...$state.records,
+      [conversationId]: updatedRecords,
+    };
  },
 };

--- a/app/javascript/dashboard/store/modules/conversationWatchers.js
+++ b/app/javascript/dashboard/store/modules/conversationWatchers.js
@@ -1,4 +1,3 @@
-import Vue from 'vue';
 import types from '../mutation-types';
 import { throwErrorMessage } from 'dashboard/store/utils/api';

@@ -76,7 +75,10 @@ export const mutations = {
  },

  [types.SET_CONVERSATION_PARTICIPANTS]($state, { data, conversationId }) {
-    Vue.set($state.records, conversationId, data);
+    $state.records = {
+      ...$state.records,
+      [conversationId]: data,
+    };
  },
 };

--- a/app/javascript/dashboard/store/modules/conversations/actions.js
+++ b/app/javascript/dashboard/store/modules/conversations/actions.js
@@ -1,4 +1,3 @@
-import Vue from 'vue';
 import types from '../../mutation-types';
 import ConversationApi from '../../../api/inbox/conversation';
 import MessageApi from '../../../api/inbox/message';
@@ -12,7 +11,7 @@ import {
 } from './helpers/actionHelpers';
 import messageReadActions from './actions/messageReadActions';
 import messageTranslateActions from './actions/messageTranslateActions';
-import * as Sentry from '@sentry/browser';
+import * as Sentry from '@sentry/vue';

 export const hasMessageFailedWithExternalError = pendingMessage => {
  // This helper is used to check if the message has failed with an external error.
@@ -196,7 +195,7 @@ const actions = {
          before: data.messages[0].id,
          conversationId: data.id,
        });
-        Vue.set(data, 'dataFetched', true);
+        data.dataFetched = true;
      } catch (error) {
        // Ignore error
      }
--- a/app/javascript/dashboard/store/modules/conversations/index.js
+++ b/app/javascript/dashboard/store/modules/conversations/index.js
@@ -1,4 +1,3 @@
-import Vue from 'vue';
 import types from '../../mutation-types';
 import getters, { getSelectedChatConversation } from './getters';
 import actions from './actions';
@@ -60,12 +59,12 @@ export const mutations = {
  },
  [types.SET_ALL_MESSAGES_LOADED](_state) {
    const [chat] = getSelectedChatConversation(_state);
-    Vue.set(chat, 'allMessagesLoaded', true);
+    chat.allMessagesLoaded = true;
  },

  [types.CLEAR_ALL_MESSAGES_LOADED](_state) {
    const [chat] = getSelectedChatConversation(_state);
-    Vue.set(chat, 'allMessagesLoaded', false);
+    chat.allMessagesLoaded = false;
  },
  [types.CLEAR_CURRENT_CHAT_WINDOW](_state) {
    _state.selectedChatId = null;
@@ -86,7 +85,7 @@ export const mutations = {
  [types.SET_MISSING_MESSAGES](_state, { id, data }) {
    const [chat] = _state.allConversations.filter(c => c.id === id);
    if (!chat) return;
-    Vue.set(chat, 'messages', data);
+    chat.messages = data;
  },

  [types.SET_CURRENT_CHAT_WINDOW](_state, activeChat) {
@@ -97,12 +96,12 @@ export const mutations = {

  [types.ASSIGN_AGENT](_state, assignee) {
    const [chat] = getSelectedChatConversation(_state);
-    Vue.set(chat.meta, 'assignee', assignee);
+    chat.meta.assignee = assignee;
  },

  [types.ASSIGN_TEAM](_state, { team, conversationId }) {
    const [chat] = _state.allConversations.filter(c => c.id === conversationId);
-    Vue.set(chat.meta, 'team', team);
+    chat.meta.team = team;
  },

  [types.UPDATE_CONVERSATION_LAST_ACTIVITY](
@@ -111,17 +110,17 @@ export const mutations = {
  ) {
    const [chat] = _state.allConversations.filter(c => c.id === conversationId);
    if (chat) {
-      Vue.set(chat, 'last_activity_at', lastActivityAt);
+      chat.last_activity_at = lastActivityAt;
    }
  },
  [types.ASSIGN_PRIORITY](_state, { priority, conversationId }) {
    const [chat] = _state.allConversations.filter(c => c.id === conversationId);
-    Vue.set(chat, 'priority', priority);
+    chat.priority = priority;
  },

  [types.UPDATE_CONVERSATION_CUSTOM_ATTRIBUTES](_state, custom_attributes) {
    const [chat] = getSelectedChatConversation(_state);
-    Vue.set(chat, 'custom_attributes', custom_attributes);
+    chat.custom_attributes = custom_attributes;
  },

  [types.CHANGE_CONVERSATION_STATUS](
@@ -130,18 +129,18 @@ export const mutations = {
  ) {
    const conversation =
      getters.getConversationById(_state)(conversationId) || {};
-    Vue.set(conversation, 'snoozed_until', snoozedUntil);
-    Vue.set(conversation, 'status', status);
+    conversation.snoozed_until = snoozedUntil;
+    conversation.status = status;
  },

  [types.MUTE_CONVERSATION](_state) {
    const [chat] = getSelectedChatConversation(_state);
-    Vue.set(chat, 'muted', true);
+    chat.muted = true;
  },

  [types.UNMUTE_CONVERSATION](_state) {
    const [chat] = getSelectedChatConversation(_state);
-    Vue.set(chat, 'muted', false);
+    chat.muted = false;
  },

  [types.ADD_CONVERSATION_ATTACHMENTS](_state, message) {
@@ -190,7 +189,7 @@ export const mutations = {

    const pendingMessageIndex = findPendingMessageIndex(chat, message);
    if (pendingMessageIndex !== -1) {
-      Vue.set(chat.messages, pendingMessageIndex, message);
+      chat.messages[pendingMessageIndex] = message;
    } else {
      chat.messages.push(message);
      chat.timestamp = message.created_at;
@@ -218,7 +217,7 @@ export const mutations = {
        ...allConversations[currentConversationIndex],
        ...conversationAttributes,
      };
-      Vue.set(allConversations, currentConversationIndex, currentConversation);
+      allConversations[currentConversationIndex] = currentConversation;
      if (_state.selectedChatId === conversation.id) {
        emitter.emit(BUS_EVENTS.FETCH_LABEL_SUGGESTIONS);
        emitter.emit(BUS_EVENTS.SCROLL_TO_MESSAGE);
@@ -242,8 +241,8 @@ export const mutations = {
  ) {
    const [chat] = _state.allConversations.filter(c => c.id === id);
    if (chat) {
-      Vue.set(chat, 'agent_last_seen_at', lastSeen);
-      Vue.set(chat, 'unread_count', unreadCount);
+      chat.agent_last_seen_at = lastSeen;
+      chat.unread_count = unreadCount;
    }
  },
  [types.CHANGE_CHAT_STATUS_FILTER](_state, data) {
@@ -257,13 +256,13 @@ export const mutations = {
  // Update assignee on action cable message
  [types.UPDATE_ASSIGNEE](_state, payload) {
    const [chat] = _state.allConversations.filter(c => c.id === payload.id);
-    Vue.set(chat.meta, 'assignee', payload.assignee);
+    chat.meta.assignee = payload.assignee;
  },

  [types.UPDATE_CONVERSATION_CONTACT](_state, { conversationId, ...payload }) {
    const [chat] = _state.allConversations.filter(c => c.id === conversationId);
    if (chat) {
-      Vue.set(chat.meta, 'sender', payload);
+      chat.meta.sender = payload;
    }
  },

@@ -274,7 +273,7 @@ export const mutations = {
  [types.SET_CONVERSATION_CAN_REPLY](_state, { conversationId, canReply }) {
    const [chat] = _state.allConversations.filter(c => c.id === conversationId);
    if (chat) {
-      Vue.set(chat, 'can_reply', canReply);
+      chat.can_reply = canReply;
    }
  },

@@ -282,7 +281,7 @@ export const mutations = {
    const chats = _state.allConversations.filter(
      c => c.meta.sender.id !== contactId
    );
-    Vue.set(_state, 'allConversations', chats);
+    _state.allConversations = chats;
  },

  [types.SET_CONVERSATION_FILTERS](_state, data) {
--- a/app/javascript/dashboard/store/modules/draftMessages.js
+++ b/app/javascript/dashboard/store/modules/draftMessages.js
@@ -1,4 +1,3 @@
-import Vue from 'vue';
 import types from '../mutation-types';

 import { REPLY_EDITOR_MODES } from 'dashboard/components/widgets/WootWriter/constants';
@@ -31,16 +30,19 @@ export const actions = {

 export const mutations = {
  [types.SET_DRAFT_MESSAGES]($state, { key, message }) {
-    Vue.set($state.records, key, message);
+    $state.records = {
+      ...$state.records,
+      [key]: message,
+    };
    LocalStorage.set(LOCAL_STORAGE_KEYS.DRAFT_MESSAGES, $state.records);
  },
  [types.REMOVE_DRAFT_MESSAGES]($state, { key }) {
    const { [key]: draftToBeRemoved, ...updatedRecords } = $state.records;
-    Vue.set($state, 'records', updatedRecords);
+    $state.records = updatedRecords;
    LocalStorage.set(LOCAL_STORAGE_KEYS.DRAFT_MESSAGES, $state.records);
  },
  [types.SET_REPLY_EDITOR_MODE]($state, { mode }) {
-    Vue.set($state, 'replyEditorMode', mode);
+    $state.replyEditorMode = mode;
  },
 };

--- a/app/javascript/dashboard/store/modules/helpCenterArticles/mutations.js
+++ b/app/javascript/dashboard/store/modules/helpCenterArticles/mutations.js
@@ -1,5 +1,4 @@
 import types from '../../mutation-types';
-import Vue from 'vue';

 export const mutations = {
  [types.SET_UI_FLAG](_state, uiFlags) {
@@ -12,14 +11,12 @@ export const mutations = {
  [types.ADD_ARTICLE]: ($state, article) => {
    if (!article.id) return;

-    Vue.set($state.articles.byId, article.id, {
-      ...article,
-    });
+    $state.articles.byId[article.id] = article;
  },
  [types.CLEAR_ARTICLES]: $state => {
-    Vue.set($state.articles, 'byId', {});
-    Vue.set($state.articles, 'allIds', []);
-    Vue.set($state.articles, 'uiFlags.byId', {});
+    $state.articles.allIds = [];
+    $state.articles.byId = {};
+    $state.articles.uiFlags.byId = {};
  },
  [types.ADD_MANY_ARTICLES]($state, articles) {
    const allArticles = { ...$state.articles.byId };
@@ -27,7 +24,7 @@ export const mutations = {
      allArticles[article.id] = article;
    });

-    Vue.set($state.articles, 'byId', allArticles);
+    $state.articles.byId = allArticles;
  },
  [types.ADD_MANY_ARTICLES_ID]($state, articleIds) {
    $state.articles.allIds.push(...articleIds);
@@ -35,8 +32,8 @@ export const mutations = {

  [types.SET_ARTICLES_META]: ($state, data) => {
    const { articles_count: count, current_page: currentPage } = data;
-    Vue.set($state.meta, 'count', count);
-    Vue.set($state.meta, 'currentPage', currentPage);
+    $state.meta.count = count;
+    $state.meta.currentPage = currentPage;
  },

  [types.ADD_ARTICLE_ID]: ($state, articleId) => {
@@ -47,7 +44,7 @@ export const mutations = {
    const flags =
      Object.keys($state.articles.uiFlags.byId).includes(articleId) || {};

-    Vue.set($state.articles.uiFlags.byId, articleId, {
+    $state.articles.uiFlags.byId[articleId] = {
      ...{
        isFetching: false,
        isUpdating: false,
@@ -55,29 +52,27 @@ export const mutations = {
      },
      ...flags,
      ...uiFlags,
-    });
+    };
  },
  [types.ADD_ARTICLE_FLAG]: ($state, { articleId, uiFlags }) => {
-    Vue.set($state.articles.uiFlags.byId, articleId, {
+    $state.articles.uiFlags.byId[articleId] = {
      ...{
        isFetching: false,
        isUpdating: false,
        isDeleting: false,
      },
      ...uiFlags,
-    });
+    };
  },
  [types.UPDATE_ARTICLE]($state, article) {
    const articleId = article.id;
    if (!$state.articles.allIds.includes(articleId)) return;

-    Vue.set($state.articles.byId, articleId, {
-      ...article,
-    });
+    $state.articles.byId[articleId] = { ...article };
  },
  [types.REMOVE_ARTICLE]($state, articleId) {
    const { [articleId]: toBeRemoved, ...newById } = $state.articles.byId;
-    Vue.set($state.articles, 'byId', newById);
+    $state.articles.byId = newById;
  },
  [types.REMOVE_ARTICLE_ID]($state, articleId) {
    $state.articles.allIds = $state.articles.allIds.filter(
--- a/app/javascript/dashboard/store/modules/helpCenterCategories/mutations.js
+++ b/app/javascript/dashboard/store/modules/helpCenterCategories/mutations.js
@@ -1,5 +1,4 @@
 import types from '../../mutation-types';
-import Vue from 'vue';

 export const mutations = {
  [types.SET_UI_FLAG](_state, uiFlags) {
@@ -12,21 +11,19 @@ export const mutations = {
  [types.ADD_CATEGORY]: ($state, category) => {
    if (!category.id) return;

-    Vue.set($state.categories.byId, category.id, {
-      ...category,
-    });
+    $state.categories.byId[category.id] = { ...category };
  },
  [types.CLEAR_CATEGORIES]: $state => {
-    Vue.set($state.categories, 'byId', {});
-    Vue.set($state.categories, 'allIds', []);
-    Vue.set($state.categories.uiFlags, 'byId', {});
+    $state.categories.byId = {};
+    $state.categories.allIds = [];
+    $state.categories.uiFlags.byId = {};
  },
  [types.ADD_MANY_CATEGORIES]($state, categories) {
    const allCategories = { ...$state.categories.byId };
    categories.forEach(category => {
      allCategories[category.id] = category;
    });
-    Vue.set($state.categories, 'byId', allCategories);
+    $state.categories.byId = allCategories;
  },
  [types.ADD_MANY_CATEGORIES_ID]($state, categoryIds) {
    $state.categories.allIds.push(...categoryIds);
@@ -34,8 +31,7 @@ export const mutations = {

  [types.SET_CATEGORIES_META]: ($state, data) => {
    const { categories_count: count, current_page: currentPage } = data;
-    Vue.set($state.meta, 'count', count);
-    Vue.set($state.meta, 'currentPage', currentPage);
+    $state.meta = { ...$state.meta, count, currentPage };
  },

  [types.ADD_CATEGORY_ID]: ($state, categoryId) => {
@@ -43,7 +39,7 @@ export const mutations = {
  },
  [types.ADD_CATEGORY_FLAG]: ($state, { categoryId, uiFlags }) => {
    const flags = $state.categories.uiFlags.byId[categoryId];
-    Vue.set($state.categories.uiFlags.byId, categoryId, {
+    $state.categories.uiFlags.byId[categoryId] = {
      ...{
        isFetching: false,
        isUpdating: false,
@@ -51,20 +47,18 @@ export const mutations = {
      },
      ...flags,
      ...uiFlags,
-    });
+    };
  },
  [types.UPDATE_CATEGORY]($state, category) {
    const categoryId = category.id;

    if (!$state.categories.allIds.includes(categoryId)) return;

-    Vue.set($state.categories.byId, categoryId, {
-      ...category,
-    });
+    $state.categories.byId[categoryId] = { ...category };
  },
  [types.REMOVE_CATEGORY]($state, categoryId) {
    const { [categoryId]: toBeRemoved, ...newById } = $state.categories.byId;
-    Vue.set($state.categories, 'byId', newById);
+    $state.categories.byId = newById;
  },
  [types.REMOVE_CATEGORY_ID]($state, categoryId) {
    $state.categories.allIds = $state.categories.allIds.filter(
--- a/app/javascript/dashboard/store/modules/helpCenterPortals/mutations.js
+++ b/app/javascript/dashboard/store/modules/helpCenterPortals/mutations.js
@@ -1,4 +1,3 @@
-import Vue from 'vue';
 import { defaultPortalFlags } from './index';

 export const types = {
@@ -24,9 +23,12 @@ export const mutations = {
  },

  [types.ADD_PORTAL_ENTRY]($state, portal) {
-    Vue.set($state.portals.byId, portal.slug, {
-      ...portal,
-    });
+    $state.portals.byId = {
+      ...$state.portals.byId,
+      [portal.slug]: {
+        ...portal,
+      },
+    };
  },

  [types.ADD_MANY_PORTALS_ENTRY]($state, portals) {
@@ -34,13 +36,13 @@ export const mutations = {
    portals.forEach(portal => {
      allPortals[portal.slug] = portal;
    });
-    Vue.set($state.portals, 'byId', allPortals);
+    $state.portals.byId = allPortals;
  },

  [types.CLEAR_PORTALS]: $state => {
-    Vue.set($state.portals, 'byId', {});
-    Vue.set($state.portals, 'allIds', []);
-    Vue.set($state.portals.uiFlags, 'byId', {});
+    $state.portals.byId = {};
+    $state.portals.allIds = [];
+    $state.portals.uiFlags.byId = {};
  },

  [types.SET_PORTALS_META]: ($state, data) => {
@@ -50,10 +52,13 @@ export const mutations = {
      draft_articles_count: draftArticlesCount = 0,
      archived_articles_count: archivedArticlesCount = 0,
    } = data;
-    Vue.set($state.meta, 'allArticlesCount', allArticlesCount);
-    Vue.set($state.meta, 'archivedArticlesCount', archivedArticlesCount);
-    Vue.set($state.meta, 'mineArticlesCount', mineArticlesCount);
-    Vue.set($state.meta, 'draftArticlesCount', draftArticlesCount);
+    $state.meta = {
+      ...$state.meta,
+      allArticlesCount,
+      archivedArticlesCount,
+      mineArticlesCount,
+      draftArticlesCount,
+    };
  },

  [types.ADD_PORTAL_ID]($state, portalSlug) {
@@ -68,16 +73,19 @@ export const mutations = {
    const portalSlug = portal.slug;
    if (!$state.portals.allIds.includes(portalSlug)) return;

-    Vue.set($state.portals.byId, portalSlug, {
-      ...portal,
-    });
+    $state.portals.byId = {
+      ...$state.portals.byId,
+      [portalSlug]: {
+        ...portal,
+      },
+    };
  },

  [types.REMOVE_PORTAL_ENTRY]($state, portalSlug) {
    if (!portalSlug) return;

    const { [portalSlug]: toBeRemoved, ...newById } = $state.portals.byId;
-    Vue.set($state.portals, 'byId', newById);
+    $state.portals.byId = newById;
  },

  [types.REMOVE_PORTAL_ID]($state, portalSlug) {
@@ -88,10 +96,13 @@ export const mutations = {

  [types.SET_HELP_PORTAL_UI_FLAG]($state, { portalSlug, uiFlags }) {
    const flags = $state.portals.uiFlags.byId[portalSlug];
-    Vue.set($state.portals.uiFlags.byId, portalSlug, {
-      ...defaultPortalFlags,
-      ...flags,
-      ...uiFlags,
-    });
+    $state.portals.uiFlags.byId = {
+      ...$state.portals.uiFlags.byId,
+      [portalSlug]: {
+        ...defaultPortalFlags,
+        ...flags,
+        ...uiFlags,
+      },
+    };
  },
 };
--- a/app/javascript/dashboard/store/modules/inboxAssignableAgents.js
+++ b/app/javascript/dashboard/store/modules/inboxAssignableAgents.js
@@ -1,5 +1,3 @@
-import Vue from 'vue';
-
 import AssignableAgentsAPI from '../../api/assignableAgents';

 const state = {
@@ -52,7 +50,10 @@ export const mutations = {
    };
  },
  [types.SET_INBOX_ASSIGNABLE_AGENTS]: ($state, { inboxId, members }) => {
-    Vue.set($state.records, inboxId, members);
+    $state.records = {
+      ...$state.records,
+      [inboxId]: members,
+    };
  },
 };

--- a/app/javascript/dashboard/store/modules/integrations.js
+++ b/app/javascript/dashboard/store/modules/integrations.js
@@ -1,5 +1,4 @@
 /* eslint no-param-reassign: 0 */
-import Vue from 'vue';
 import * as MutationHelpers from 'shared/helpers/vuex/mutationHelpers';
 import * as types from '../mutation-types';
 import IntegrationsAPI from '../../api/integrations';
@@ -146,22 +145,25 @@ export const mutations = {
  [types.default.ADD_INTEGRATION]: MutationHelpers.updateAttributes,
  [types.default.DELETE_INTEGRATION]: MutationHelpers.updateAttributes,
  [types.default.ADD_INTEGRATION_HOOKS]: ($state, data) => {
-    $state.records.forEach((element, index) => {
-      if (element.id === data.app_id) {
-        const record = $state.records[index];
-        Vue.set(record, 'hooks', [...record.hooks, data]);
+    $state.records = $state.records.map(record => {
+      if (record.id === data.app_id) {
+        return {
+          ...record,
+          hooks: [...record.hooks, data],
+        };
      }
+      return record;
    });
  },
  [types.default.DELETE_INTEGRATION_HOOKS]: ($state, { appId, hookId }) => {
-    $state.records.forEach((element, index) => {
-      if (element.id === appId) {
-        const record = $state.records[index];
-        const hooksWithoutDeletedHook = record.hooks.filter(
-          hook => hook.id !== hookId
-        );
-        Vue.set(record, 'hooks', hooksWithoutDeletedHook);
+    $state.records = $state.records.map(record => {
+      if (record.id === appId) {
+        return {
+          ...record,
+          hooks: record.hooks.filter(hook => hook.id !== hookId),
+        };
      }
+      return record;
    });
  },
 };
--- a/app/javascript/dashboard/store/modules/notifications/mutations.js
+++ b/app/javascript/dashboard/store/modules/notifications/mutations.js
@@ -1,4 +1,3 @@
-import Vue from 'vue';
 import types from '../../mutation-types';

 export const mutations = {
@@ -9,8 +8,8 @@ export const mutations = {
    };
  },
  [types.CLEAR_NOTIFICATIONS]: $state => {
-    Vue.set($state, 'records', {});
-    Vue.set($state.uiFlags, 'isAllNotificationsLoaded', false);
+    $state.records = {};
+    $state.uiFlags.isAllNotificationsLoaded = false;
  },
  [types.SET_NOTIFICATIONS_META]: ($state, data) => {
    const {
@@ -19,12 +18,10 @@ export const mutations = {
      unread_count: unreadCount,
    } = data;

-    Vue.set($state.meta, 'count', count);
-    Vue.set($state.meta, 'currentPage', currentPage);
-    Vue.set($state.meta, 'unreadCount', unreadCount);
+    $state.meta = { ...$state.meta, count, currentPage, unreadCount };
  },
  [types.SET_NOTIFICATIONS_UNREAD_COUNT]: ($state, count) => {
-    Vue.set($state.meta, 'unreadCount', count < 0 ? 0 : count);
+    $state.meta.unreadCount = count < 0 ? 0 : count;
  },
  [types.SET_NOTIFICATIONS]: ($state, data) => {
    data.forEach(notification => {
@@ -36,73 +33,75 @@ export const mutations = {
      // On reconnect, if there is existing notification with same primary_actor_id,
      // it will be deleted and the new one will be added. So it will solve with duplicate notification
      if (existingNotification) {
-        Vue.delete($state.records, existingNotification.id);
+        $state.records[existingNotification.id] = undefined;
      }
-      Vue.set($state.records, notification.id, {
+
+      $state.records[notification.id] = {
        ...($state.records[notification.id] || {}),
        ...notification,
-      });
+      };
    });
  },
  [types.READ_NOTIFICATION]: ($state, { id, read_at }) => {
-    Vue.set($state.records[id], 'read_at', read_at);
+    $state.records[id].read_at = read_at;
  },
  [types.UPDATE_ALL_NOTIFICATIONS]: $state => {
    Object.values($state.records).forEach(item => {
-      Vue.set($state.records[item.id], 'read_at', true);
+      $state.records[item.id].read_at = true;
    });
  },

  [types.ADD_NOTIFICATION]($state, data) {
    const { notification, unread_count: unreadCount, count } = data;
-    Vue.set($state.records, notification.id, {
+
+    $state.records[notification.id] = {
      ...($state.records[notification.id] || {}),
      ...notification,
-    });
-    Vue.set($state.meta, 'unreadCount', unreadCount);
-    Vue.set($state.meta, 'count', count);
+    };
+    $state.meta.unreadCount = unreadCount;
+    $state.meta.count = count;
  },
  [types.UPDATE_NOTIFICATION]($state, data) {
    const { notification, unread_count: unreadCount, count } = data;
-    Vue.set($state.records, notification.id, {
+    $state.records[notification.id] = {
      ...($state.records[notification.id] || {}),
      ...notification,
-    });
-    Vue.set($state.meta, 'unreadCount', unreadCount);
-    Vue.set($state.meta, 'count', count);
+    };
+    $state.meta.unreadCount = unreadCount;
+    $state.meta.count = count;
  },
  [types.DELETE_NOTIFICATION]($state, data) {
    const { notification, unread_count: unreadCount, count } = data;
-    Vue.delete($state.records, notification.id);
-    Vue.set($state.meta, 'unreadCount', unreadCount);
-    Vue.set($state.meta, 'count', count);
+    $state.records[notification.id] = undefined;
+    $state.meta.unreadCount = unreadCount;
+    $state.meta.count = count;
  },
  [types.SET_ALL_NOTIFICATIONS_LOADED]: $state => {
-    Vue.set($state.uiFlags, 'isAllNotificationsLoaded', true);
+    $state.uiFlags.isAllNotificationsLoaded = true;
  },

  [types.DELETE_READ_NOTIFICATIONS]: $state => {
    Object.values($state.records).forEach(item => {
      if (item.read_at) {
-        Vue.delete($state.records, item.id);
+        $state.records[item.id] = undefined;
      }
    });
  },
  [types.DELETE_ALL_NOTIFICATIONS]: $state => {
-    Vue.set($state, 'records', {});
+    $state.records = {};
  },

  [types.SNOOZE_NOTIFICATION]: ($state, { id, snoozed_until }) => {
-    Vue.set($state.records[id], 'snoozed_until', snoozed_until);
+    $state.records[id].snoozed_until = snoozed_until;
  },

  [types.SET_NOTIFICATION_FILTERS]: ($state, filters) => {
-    Vue.set($state, 'notificationFilters', filters);
+    $state.notificationFilters = filters;
  },
  [types.UPDATE_NOTIFICATION_FILTERS]: ($state, filters) => {
-    Vue.set($state, 'notificationFilters', {
+    $state.notificationFilters = {
      ...$state.notificationFilters,
      ...filters,
-    });
+    };
  },
 };
--- a/app/javascript/dashboard/store/modules/teamMembers.js
+++ b/app/javascript/dashboard/store/modules/teamMembers.js
@@ -1,4 +1,3 @@
-import Vue from 'vue';
 import TeamsAPI from '../../api/teams';

 export const SET_TEAM_MEMBERS_UI_FLAG = 'SET_TEAM_MEMBERS_UI_FLAG';
@@ -70,7 +69,10 @@ export const mutations = {
    };
  },
  [ADD_AGENTS_TO_TEAM]($state, { data, teamId }) {
-    Vue.set($state.records, teamId, data);
+    $state.records = {
+      ...$state.records,
+      [teamId]: data,
+    };
  },
 };

--- a/app/javascript/dashboard/store/modules/teams/mutations.js
+++ b/app/javascript/dashboard/store/modules/teams/mutations.js
@@ -1,4 +1,3 @@
-import Vue from 'vue';
 import {
  SET_TEAM_UI_FLAG,
  CLEAR_TEAMS,
@@ -17,31 +16,39 @@ export const mutations = {
  },

  [CLEAR_TEAMS]: $state => {
-    Vue.set($state, 'records', {});
+    $state.records = {};
  },

  [SET_TEAMS]: ($state, data) => {
+    const updatedRecords = { ...$state.records };
    data.forEach(team => {
-      Vue.set($state.records, team.id, {
-        ...($state.records[team.id] || {}),
+      updatedRecords[team.id] = {
+        ...(updatedRecords[team.id] || {}),
        ...team,
-      });
+      };
    });
+    $state.records = updatedRecords;
  },

  [SET_TEAM_ITEM]: ($state, data) => {
-    Vue.set($state.records, data.id, {
-      ...($state.records[data.id] || {}),
-      ...data,
-    });
+    $state.records = {
+      ...$state.records,
+      [data.id]: {
+        ...($state.records[data.id] || {}),
+        ...data,
+      },
+    };
  },

  [EDIT_TEAM]: ($state, data) => {
-    Vue.set($state.records, data.id, data);
+    $state.records = {
+      ...$state.records,
+      [data.id]: data,
+    };
  },

  [DELETE_TEAM]: ($state, teamId) => {
    const { [teamId]: toDelete, ...records } = $state.records;
-    Vue.set($state, 'records', records);
+    $state.records = records;
  },
 };
--- a/app/javascript/dashboard/store/modules/userNotificationSettings.js
+++ b/app/javascript/dashboard/store/modules/userNotificationSettings.js
@@ -1,4 +1,3 @@
-import Vue from 'vue';
 import * as types from '../mutation-types';
 import UserNotificationSettings from '../../api/userNotificationSettings';

@@ -68,7 +67,7 @@ export const mutations = {
    };
  },
  [types.default.SET_USER_NOTIFICATION]: ($state, data) => {
-    Vue.set($state, 'record', data);
+    $state.record = data;
  },
 };