refreshHeader() function is not updating header names after I change i18 locale

Question

As title says, my AG-GRID table is not updating Header names. I've trying to update using two ways: manual and auto.

How manual way works? I have a simple button that fires a @click="updateHeader" function.
How auto way works? I have e watch lifehook that see when my i18 locale changes and fire the updateHeader function.

Check updateHeader function:

updateHeader() {
            console.log('Update header called....');
            if (this.gridApi) {
                console.log('Grid API: ', this.gridApi);
                this.gridApi.refreshHeader();
            }

        }

updateHeader is "working" fine, I can see the API data inside my console.log, but my table don't update header name.

My watch lifehook:

watch: {
        '$i18n.locale'(newLocale) {
            console.log('Locale has been changed to: ', newLocale);
            this.updateHeader();
            this.updateGrid++;
        },
        deep: true
    },

I'm using columns in beforeMount lifehook, like ag-grid docs tell me to do:

this.columns = [
            {
                editable: false,
                field: 'small_image',
                headerName: this.$t('registers.instructor.photo'),
                menuTabs: [],

                valueFormatter: this.emptyDataFormatter,
                width: 100,
            },
            {
                cellEditor: 'agTextCellEditor',
                cellEditorParams: {
                    maxLength: 20,
                },
                editable: true,
                field: 'nickname',
                flex: 1,
                headerName: this.$t('label.nickname'),
                menuTabs: [],
                valueFormatter: this.emptyDataFormatter,
            },
]

May my i18 approach is incorrect in headerName?
Any advice? Do I need to change my data to a computed?
Additional info:

    "ag-grid-community": "^31.1.1",
    "ag-grid-vue": "^31.1.1",

Answer 1

If you've faced this problem like I have, here's how to solve it: Change headerName to headerValueGetter.

headerName: this.$t('label.nickname') // Internationalization doesn't work

headerValueGetter: () => this.$t('label.nickname') // Function to dynamically generate the headerName

I found the answer to this problem in this Issue.

In my context, the code looks like this:

this.columns = [
            {
                editable: false,
                field: 'small_image',
                headerName: this.$t('registers.instructor.photo'),
                headerValueGetter: () => this.$t('registers.instructor.photo'),
                menuTabs: [],

                valueFormatter: this.emptyDataFormatter,
                width: 100,
            },
            {
                cellEditor: 'agTextCellEditor',
                cellEditorParams: {
                    maxLength: 20,
                },
                editable: true,
                field: 'nickname',
                flex: 1,
                headerName: this.$t('label.nickname'),
                headerValueGetter: () => this.$t('label.nickname'),
                menuTabs: [],
                valueFormatter: this.emptyDataFormatter,
            },
]