diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatTable.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatTable.vue
index 8beeafd70..76a3e3079 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatTable.vue
@@ -61,7 +61,7 @@ const defaultSpanRender = cellProps => {
 
 const columnHelper = createColumnHelper();
 
-const columns = [
+const columns = computed(() => [
   columnHelper.accessor('contact', {
     header: t('CSAT_REPORTS.TABLE.HEADER.CONTACT_NAME'),
     width: 200,
@@ -121,7 +121,7 @@ const columns = [
     width: 100,
     cell: cellProps => h(ConversationCell, cellProps),
   }),
-];
+]);
 
 const paginationParams = computed(() => {
   return {
@@ -134,7 +134,9 @@ const table = useVueTable({
   get data() {
     return tableData.value;
   },
-  columns,
+  get columns() {
+    return columns.value;
+  },
   manualPagination: true,
   enableSorting: false,
   getCoreRowModel: getCoreRowModel(),
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/DateRange.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/DateRange.vue
index 4d1cc340f..9caab26dd 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/DateRange.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/DateRange.vue
@@ -1,28 +1,33 @@
-<script>
+<script setup>
+import { ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
 import { DATE_RANGE_OPTIONS } from '../../constants';
 
-const EVENT_NAME = 'on-range-change';
+const emit = defineEmits(['onRangeChange']);
 
-export default {
-  name: 'ReportFiltersDateRange',
-  data() {
-    const translatedOptions = Object.values(DATE_RANGE_OPTIONS).map(option => ({
-      ...option,
-      name: this.$t(option.translationKey),
-    }));
+const { t } = useI18n();
 
-    return {
-      // relies on translations, need to move it to constants
-      selectedOption: translatedOptions[0],
-      options: translatedOptions,
-    };
+const options = computed(() =>
+  Object.values(DATE_RANGE_OPTIONS).map(option => ({
+    ...option,
+    name: t(option.translationKey),
+  }))
+);
+
+const selectedId = ref(Object.values(DATE_RANGE_OPTIONS)[0].id);
+
+const selectedOption = computed({
+  get() {
+    return options.value.find(o => o.id === selectedId.value);
   },
-  methods: {
-    updateRange(selectedRange) {
-      this.selectedOption = selectedRange;
-      this.$emit(EVENT_NAME, selectedRange);
-    },
+  set(val) {
+    selectedId.value = val.id;
   },
+});
+
+const updateRange = range => {
+  selectedOption.value = range;
+  emit('onRangeChange', range);
 };
 </script>
 
@@ -31,7 +36,7 @@ export default {
     <multiselect
       v-model="selectedOption"
       class="no-margin"
-      track-by="name"
+      track-by="id"
       label="name"
       :placeholder="$t('FORMS.MULTISELECT.SELECT_ONE')"
       selected-label
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersDateRange.spec.js b/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersDateRange.spec.js
index e6253186b..c863029fe 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersDateRange.spec.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersDateRange.spec.js
@@ -12,33 +12,30 @@ const mountParams = {
 };
 
 describe('ReportFiltersDateRange.vue', () => {
-  it('emits "on-range-change" event when updateRange is called', () => {
+  it('emits "onRangeChange" event when updateRange is called', () => {
     const wrapper = shallowMount(ReportFiltersDateRange, mountParams);
 
     const selectedRange = DATE_RANGE_OPTIONS.LAST_7_DAYS;
     wrapper.vm.updateRange(selectedRange);
 
-    expect(wrapper.emitted('on-range-change')).toBeTruthy();
-    expect(wrapper.emitted('on-range-change')[0]).toEqual([selectedRange]);
+    expect(wrapper.emitted('onRangeChange')).toBeTruthy();
+    expect(wrapper.emitted('onRangeChange')[0]).toEqual([selectedRange]);
   });
 
   it('initializes options correctly', () => {
     const wrapper = shallowMount(ReportFiltersDateRange, mountParams);
 
-    const expectedOptions = Object.values(DATE_RANGE_OPTIONS).map(option => ({
-      ...option,
-      name: option.translationKey,
-    }));
+    const expectedIds = Object.values(DATE_RANGE_OPTIONS).map(
+      option => option.id
+    );
+    const receivedIds = wrapper.vm.options.map(option => option.id);
 
-    expect(wrapper.vm.options).toEqual(expectedOptions);
+    expect(receivedIds).toEqual(expectedIds);
   });
 
   it('initializes selectedOption correctly', () => {
     const wrapper = shallowMount(ReportFiltersDateRange, mountParams);
-    const expectedSelectedOption = Object.values(DATE_RANGE_OPTIONS)[0];
-    expect(wrapper.vm.selectedOption).toEqual({
-      ...expectedSelectedOption,
-      name: expectedSelectedOption.translationKey,
-    });
+    const expectedId = Object.values(DATE_RANGE_OPTIONS)[0].id;
+    expect(wrapper.vm.selectedOption.id).toBe(expectedId);
   });
 });