diff --git a/packages/primevue/src/datatable/ColumnFilter.vue b/packages/primevue/src/datatable/ColumnFilter.vue
index baf5b0830..fc1e04d22 100644
--- a/packages/primevue/src/datatable/ColumnFilter.vue
+++ b/packages/primevue/src/datatable/ColumnFilter.vue
@@ -164,11 +164,11 @@
 </template>
 
 <script>
+import { absolutePosition, addStyle, focus, getAttribute, isTouchDevice } from '@primeuix/utils/dom';
+import { ZIndex } from '@primeuix/utils/zindex';
 import { FilterOperator } from '@primevue/core/api';
 import BaseComponent from '@primevue/core/basecomponent';
-import { ConnectedOverlayScrollHandler, UniqueComponentId } from '@primevue/core/utils';
-import { getAttribute, focus, addStyle, absolutePosition, isTouchDevice } from '@primeuix/utils/dom';
-import { ZIndex } from '@primeuix/utils/zindex';
+import { ConnectedOverlayScrollHandler } from '@primevue/core/utils';
 import FilterIcon from '@primevue/icons/filter';
 import FilterSlashIcon from '@primevue/icons/filterslash';
 import PlusIcon from '@primevue/icons/plus';
@@ -298,17 +298,11 @@ export default {
     },
     data() {
         return {
-            id: this.$attrs.id,
             overlayVisible: false,
             defaultMatchMode: null,
             defaultOperator: null
         };
     },
-    watch: {
-        '$attrs.id': function (newValue) {
-            this.id = newValue || UniqueComponentId();
-        }
-    },
     overlay: null,
     selfClick: false,
     overlayEventListener: null,
@@ -324,8 +318,6 @@ export default {
         }
     },
     mounted() {
-        this.id = this.id || UniqueComponentId();
-
         if (this.filters && this.filters[this.field]) {
             let fieldFilters = this.filters[this.field];
 
@@ -647,7 +639,7 @@ export default {
             return this.showMenu && (this.display === 'row' ? this.type !== 'boolean' : true);
         },
         overlayId() {
-            return this.id + '_overlay';
+            return this.$id + '_overlay';
         },
         matchModes() {
             return (