chore: resolve sass and vue compiler deprecation warnings (#13794)

app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue

@@ -272,13 +272,11 @@ export default {
 }
 
 .context-menu--delete-modal {
-  ::v-deep {
-    .modal-container {
-      @apply max-w-[30rem];
+  :deep(.modal-container) {
+    @apply max-w-[30rem];
 
-      h2 {
-        @apply font-medium text-base;
-      }
+    h2 {
+      @apply font-medium text-base;
     }
   }
 }

app/javascript/dashboard/modules/search/components/MessageContent.vue

@@ -104,12 +104,12 @@ const authorText = computed(() => {
 </template>
 
 <style scoped lang="scss">
-.message-content::v-deep p {
+.message-content :deep(p) {
   @apply inline;
   margin: 0;
 }
 
-.message-content::v-deep br {
+.message-content :deep(br) {
   display: none;
 }
 </style>

app/javascript/dashboard/modules/search/components/SearchContactAgentSelector.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, defineModel, watch } from 'vue';
+import { ref, computed, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useToggle } from '@vueuse/core';
 import { vOnClickOutside } from '@vueuse/components';

app/javascript/dashboard/modules/search/components/SearchDateRangeSelector.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, ref, defineModel } from 'vue';
+import { computed, ref } from 'vue';
 import { useToggle } from '@vueuse/core';
 import { useI18n } from 'vue-i18n';
 import { vOnClickOutside } from '@vueuse/components';

app/javascript/dashboard/modules/search/components/SearchFilters.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, defineModel } from 'vue';
+import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import SearchDateRangeSelector from './SearchDateRangeSelector.vue';
 import SearchContactAgentSelector from './SearchContactAgentSelector.vue';

app/javascript/dashboard/modules/search/components/SearchHeader.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, watch, useTemplateRef, defineModel } from 'vue';
+import { ref, watch, useTemplateRef } from 'vue';
 import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 import { INSTALLATION_TYPES } from 'dashboard/constants/installationTypes';
 import { ROLES } from 'dashboard/constants/permissions';

app/javascript/dashboard/modules/search/components/SearchInboxSelector.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, defineModel } from 'vue';
+import { ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useToggle } from '@vueuse/core';
 import { vOnClickOutside } from '@vueuse/components';

app/javascript/dashboard/modules/search/components/SearchResultConversationsList.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { defineProps, computed } from 'vue';
+import { computed } from 'vue';
 import { useMapGetter } from 'dashboard/composables/store.js';
 
 import SearchResultSection from './SearchResultSection.vue';

app/javascript/dashboard/modules/widget-preview/components/WidgetBody.vue

@@ -1,6 +1,4 @@
 <script setup>
-import { defineProps } from 'vue';
-
 defineProps({
   config: {
     type: Object,