diff --git a/.eslintrc.js b/.eslintrc.js
index 24a057405..2239542f0 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -160,6 +160,7 @@ module.exports = {
     'vue/no-v-text': 'error',
     'vue/padding-line-between-blocks': ['error', 'always'],
     'vue/prefer-prop-type-boolean-first': 'error',
+    'vue/prefer-separate-static-class': 'error',
     'vue/max-attributes-per-line': [
       'error',
       {
diff --git a/app/javascript/dashboard/components/Modal.vue b/app/javascript/dashboard/components/Modal.vue
index 1dad472f7..ae126aa11 100644
--- a/app/javascript/dashboard/components/Modal.vue
+++ b/app/javascript/dashboard/components/Modal.vue
@@ -84,8 +84,8 @@ export default {
       @mousedown="handleMouseDown"
     >
       <div
+        class="relative max-h-full overflow-auto bg-white shadow-md modal-container rtl:text-right dark:bg-slate-800 skip-context-menu"
         :class="{
-          'modal-container rtl:text-right shadow-md max-h-full overflow-auto relative bg-white dark:bg-slate-800 skip-context-menu': true,
           'rounded-xl w-[37.5rem]': !fullWidth,
           'items-center rounded-none flex h-full justify-center w-full':
             fullWidth,
diff --git a/app/javascript/dashboard/components/ui/Tabs/TabsItem.vue b/app/javascript/dashboard/components/ui/Tabs/TabsItem.vue
index 4fdcfab09..d6356aa9f 100644
--- a/app/javascript/dashboard/components/ui/Tabs/TabsItem.vue
+++ b/app/javascript/dashboard/components/ui/Tabs/TabsItem.vue
@@ -47,8 +47,8 @@ export default {
 
 <template>
   <li
+    class="tabs-title"
     :class="{
-      'tabs-title': true,
       'is-active': active,
     }"
   >
diff --git a/app/javascript/dashboard/components/widgets/conversation/Message.vue b/app/javascript/dashboard/components/widgets/conversation/Message.vue
index e0bcf547c..b4fdd5466 100644
--- a/app/javascript/dashboard/components/widgets/conversation/Message.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/Message.vue
@@ -443,7 +443,8 @@ export default {
   <li
     v-if="shouldRenderMessage"
     :id="`message${data.id}`"
-    :class="[alignBubble, 'group']"
+    class="group"
+    :class="[alignBubble]"
   >
     <div :class="wrapClass">
       <div
diff --git a/app/javascript/widget/components/dropdown/DropdownMenuItem.vue b/app/javascript/widget/components/dropdown/DropdownMenuItem.vue
index f00023b4f..ae1853317 100644
--- a/app/javascript/widget/components/dropdown/DropdownMenuItem.vue
+++ b/app/javascript/widget/components/dropdown/DropdownMenuItem.vue
@@ -42,7 +42,7 @@ export default {
 </script>
 
 <template>
-  <button :class="['menu-item', itemClass]" @click="action">
+  <button class="menu-item" :class="[itemClass]" @click="action">
     <FluentIcon
       v-if="icon"
       :icon="iconName"