diff --git a/.eslintrc.js b/.eslintrc.js
index 492e9ca36..522fd5bab 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -148,6 +148,7 @@ module.exports = {
       },
     ],
     'vue/no-unused-emit-declarations': 'error',
+    'vue/no-unused-refs': 'error',
     'vue/max-attributes-per-line': [
       'error',
       {
diff --git a/app/javascript/dashboard/components/ModalHeader.vue b/app/javascript/dashboard/components/ModalHeader.vue
index 2bed68105..63d361278 100644
--- a/app/javascript/dashboard/components/ModalHeader.vue
+++ b/app/javascript/dashboard/components/ModalHeader.vue
@@ -21,6 +21,8 @@ export default {
 };
 </script>
 
+<!-- eslint-disable vue/no-unused-refs -->
+<!-- Added ref for writing specs -->
 <template>
   <div class="flex flex-col items-start px-8 pt-8 pb-0">
     <img v-if="headerImage" :src="headerImage" alt="No image" />
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
index 918ac87b8..2f4cd1a29 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
@@ -324,7 +324,6 @@ export default {
     </div>
     <woot-context-menu
       v-if="showContextMenu"
-      ref="menu"
       :x="contextMenu.x"
       :y="contextMenu.y"
       @close="closeContextMenu"
diff --git a/app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/TemplatesPicker.vue b/app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/TemplatesPicker.vue
index 08751015f..e7f69934c 100644
--- a/app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/TemplatesPicker.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/TemplatesPicker.vue
@@ -42,10 +42,9 @@ export default {
 
 <template>
   <div class="w-full">
-    <div class="templates__list-search gap-1">
+    <div class="gap-1 templates__list-search">
       <fluent-icon icon="search" class="search-icon" size="16" />
       <input
-        ref="search"
         v-model="query"
         type="search"
         :placeholder="$t('WHATSAPP_TEMPLATES.PICKER.SEARCH_PLACEHOLDER')"
@@ -64,7 +63,7 @@ export default {
                 {{ template.name }}
               </p>
               <span
-                class="inline-block py-1 px-2 rounded-sm text-xs leading-none cursor-default bg-white dark:bg-slate-700 text-slate-800 dark:text-slate-100"
+                class="inline-block px-2 py-1 text-xs leading-none bg-white rounded-sm cursor-default dark:bg-slate-700 text-slate-800 dark:text-slate-100"
               >
                 {{ $t('WHATSAPP_TEMPLATES.PICKER.LABELS.LANGUAGE') }} :
                 {{ template.language }}
diff --git a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/AgentSelector.vue b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/AgentSelector.vue
index 909574803..3ca53b27f 100644
--- a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/AgentSelector.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/AgentSelector.vue
@@ -118,7 +118,6 @@ export default {
             >
               <fluent-icon icon="search" class="search-icon" size="16" />
               <input
-                ref="search"
                 v-model="query"
                 type="search"
                 :placeholder="$t('BULK_ACTION.SEARCH_INPUT_PLACEHOLDER')"
diff --git a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/Index.vue b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/Index.vue
index 7b83a31c5..746b932ca 100644
--- a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/Index.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/Index.vue
@@ -147,7 +147,6 @@ export default {
     <div class="flex items-center justify-between">
       <label class="flex items-center justify-between bulk-action__panel">
         <input
-          ref="selectAllCheck"
           type="checkbox"
           class="checkbox"
           :checked="allConversationsSelected"
diff --git a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/LabelActions.vue b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/LabelActions.vue
index 16caec1c0..242369e5e 100644
--- a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/LabelActions.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/LabelActions.vue
@@ -54,7 +54,6 @@ export default {
         >
           <fluent-icon icon="search" class="search-icon" size="16" />
           <input
-            ref="search"
             v-model="query"
             type="search"
             :placeholder="$t('BULK_ACTION.SEARCH_INPUT_PLACEHOLDER')"
diff --git a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/TeamActions.vue b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/TeamActions.vue
index 345bf1395..e72b7fa69 100644
--- a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/TeamActions.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/TeamActions.vue
@@ -55,7 +55,6 @@ export default {
             >
               <fluent-icon icon="search" class="search-icon" size="16" />
               <input
-                ref="search"
                 v-model="query"
                 type="search"
                 :placeholder="$t('BULK_ACTION.SEARCH_INPUT_PLACEHOLDER')"
diff --git a/app/javascript/dashboard/modules/search/components/ReadMore.vue b/app/javascript/dashboard/modules/search/components/ReadMore.vue
index 437556a4d..06e128ec2 100644
--- a/app/javascript/dashboard/modules/search/components/ReadMore.vue
+++ b/app/javascript/dashboard/modules/search/components/ReadMore.vue
@@ -12,7 +12,6 @@ export default {
 <template>
   <div class="read-more">
     <div
-      ref="content"
       :class="{
         'shrink-container after:shrink-gradient-light dark:after:shrink-gradient-dark':
           shrink,
@@ -56,7 +55,6 @@ export default {
   @apply max-h-[100px] overflow-hidden relative;
 }
 .shrink-container::after {
-  @apply content-[''] absolute bottom-0 left-0 right-0 h-[50px] z-10;
 }
 .read-more-button {
   @apply max-w-max absolute bottom-2 left-0 right-0 mx-auto mt-0 z-20 shadow-sm;
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/EditArticleHeader.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/EditArticleHeader.vue
index b590e9f5a..6ee3d5c3c 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/EditArticleHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/EditArticleHeader.vue
@@ -201,7 +201,6 @@ export default {
             {{ $t('HELP_CENTER.EDIT_HEADER.PUBLISH_BUTTON') }}
           </woot-button>
           <woot-button
-            ref="arrowDownButton"
             size="small"
             icon="chevron-down"
             :is-disabled="!articleSlug || isArchivedArticle"
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ArticleSettings.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ArticleSettings.vue
index 303f8005c..8021b1b91 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ArticleSettings.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ArticleSettings.vue
@@ -201,7 +201,6 @@ export default {
         <label>
           {{ $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.META_TAGS.LABEL') }}
           <multiselect
-            ref="tagInput"
             v-model="metaTags"
             :placeholder="
               $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.META_TAGS.PLACEHOLDER')
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatMetrics.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatMetrics.vue
index c3e1ff98e..0f07c773c 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatMetrics.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatMetrics.vue
@@ -55,6 +55,9 @@ export default {
   },
 };
 </script>
+
+<!-- eslint-disable vue/no-unused-refs -->
+<!-- Added ref for writing specs -->
 <template>
   <div
     class="flex-col lg:flex-row flex flex-wrap mx-0 bg-white dark:bg-slate-800 rounded-[4px] p-4 mb-5 border border-solid border-slate-75 dark:border-slate-700"
@@ -85,9 +88,9 @@ export default {
       class="w-full md:w-1/2 md:max-w-[50%] flex-1 rtl:[direction:initial] p-4"
     >
       <h3
-        class="flex items-center text-xs md:text-sm font-medium m-0 text-slate-800 dark:text-slate-100"
+        class="flex items-center m-0 text-xs font-medium md:text-sm text-slate-800 dark:text-slate-100"
       >
-        <div class="flex justify-end flex-row-reverse">
+        <div class="flex flex-row-reverse justify-end">
           <div
             v-for="(rating, key, index) in ratingPercentage"
             :key="rating + key + index"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportMetricCard.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportMetricCard.vue
index 2369e3330..44f512d06 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportMetricCard.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportMetricCard.vue
@@ -18,16 +18,19 @@ defineProps({
   },
 });
 </script>
+
+<!-- eslint-disable vue/no-unused-refs -->
+<!-- Added ref for writing specs -->
 <template>
   <div
     ref="reportMetricContainer"
-    class="m-0 p-4"
+    class="p-4 m-0"
     :class="{
       'grayscale pointer-events-none opacity-30': disabled,
     }"
   >
     <h3
-      class="flex items-center text-sm font-medium m-0 text-slate-800 dark:text-slate-100"
+      class="flex items-center m-0 text-sm font-medium text-slate-800 dark:text-slate-100"
     >
       <span ref="reportMetricLabel">{{ label }}</span>
       <fluent-icon
@@ -40,7 +43,7 @@ defineProps({
     </h3>
     <h4
       ref="reportMetricValue"
-      class="text-slate-700 dark:text-slate-100 mb-0 mt-1 font-thin text-3xl"
+      class="mt-1 mb-0 text-3xl font-thin text-slate-700 dark:text-slate-100"
     >
       {{ value }}
     </h4>
diff --git a/app/javascript/superadmin_pages/views/playground/Index.vue b/app/javascript/superadmin_pages/views/playground/Index.vue
index 496adac2e..a1dbead94 100644
--- a/app/javascript/superadmin_pages/views/playground/Index.vue
+++ b/app/javascript/superadmin_pages/views/playground/Index.vue
@@ -110,7 +110,7 @@ export default {
       :response-source-name="componentData.responseSourceName"
       :response-source-path="componentData.responseSourcePath"
     />
-    <div ref="chatContainer" class="flex-1 px-8 py-4 overflow-auto">
+    <div class="flex-1 px-8 py-4 overflow-auto">
       <div
         v-for="message in messages"
         :id="`message-${message.id}`"
diff --git a/app/javascript/v3/components/GoogleOauth/Button.vue b/app/javascript/v3/components/GoogleOauth/Button.vue
index 28152d8e4..eb502e1aa 100644
--- a/app/javascript/v3/components/GoogleOauth/Button.vue
+++ b/app/javascript/v3/components/GoogleOauth/Button.vue
@@ -39,14 +39,16 @@ export default {
 };
 </script>
 
+<!-- eslint-disable vue/no-unused-refs -->
+<!-- Added ref for writing specs -->
 <template>
   <div class="flex flex-col">
     <a
       :href="getGoogleAuthUrl()"
-      class="inline-flex w-full justify-center rounded-md bg-white py-3 px-4 shadow-sm ring-1 ring-inset ring-slate-200 dark:ring-slate-600 hover:bg-slate-50 focus:outline-offset-0 dark:bg-slate-700 dark:hover:bg-slate-700"
+      class="inline-flex justify-center w-full px-4 py-3 bg-white rounded-md shadow-sm ring-1 ring-inset ring-slate-200 dark:ring-slate-600 hover:bg-slate-50 focus:outline-offset-0 dark:bg-slate-700 dark:hover:bg-slate-700"
     >
       <img src="/assets/images/auth/google.svg" alt="Google Logo" class="h-6" />
-      <span class="text-base font-medium ml-2 text-slate-600 dark:text-white">
+      <span class="ml-2 text-base font-medium text-slate-600 dark:text-white">
         {{ $t('LOGIN.OAUTH.GOOGLE_LOGIN') }}
       </span>
     </a>
diff --git a/app/javascript/widget/components/Form/PhoneInput.vue b/app/javascript/widget/components/Form/PhoneInput.vue
index bff09914a..3e2dd70cb 100644
--- a/app/javascript/widget/components/Form/PhoneInput.vue
+++ b/app/javascript/widget/components/Form/PhoneInput.vue
@@ -278,7 +278,6 @@ export default {
       </div>
       <div
         v-for="(country, index) in items"
-        ref="dropdownItem"
         :key="index"
         class="flex items-center h-8 px-2 py-2 rounded cursor-pointer country-dropdown--item"
         :class="[