Buefy field does not react on :message param change

Question

I have a Nuxt project with Buefy components. There is a form with some field component which should react on error according the message parameter for this component. But does not. I can see the correct value in debuger but component does not show the message. :message property should work like the in first email example from documentation

The code looks like:

<template #company>
    <h2 class="title">{{ $t('general.login.create_company') }}</h2>
    <b-field
        :type="loginErrors.company_name ? 'is-danger' : ''"
        :message="loginErrors.company_name ? loginErrors.company_name : ''"
    >
        <b-input
                v-model="companyName"
                name="company_name"
                type="text"
                autocomplete="off"
                :placeholder="$t('general.login.create_company')"
        ></b-input>
    </b-field>
    <div class="buttons is-centered">
        <b-button type="is-primary is-light" @click="createCompany">Save</b-button>
    </div>
</template>

...

data() {
    return {
        ...
        loginErrors: {},
        error: 'aaaaaa',
    };
},
...
async createCompany() {
    const result = await this.$api.users.createCompany({company_name: this.companyName});

    if( result.error ) {
        this.loginErrors.company_name = result.error;  // This does not work although the variable has correct value set
        this.error = result.error;  // This works fine
        return false;
    }
},

I use this pattern in other components and it works. I dont understand it. thaks for any help.

Answer 1

The solution in this case was to update Buefy version from 0.4.11 to 0.4.21. This fix the issue. Another thing is that is causes new issue with :type in combination with grouped param.