import Vue from 'vue';
import { Component, Prop, Watch } from 'vue-property-decorator';

import { findVueParent } from '../../../utils/vue';
import { AppFormControlErrors } from './control-errors';

@Component({})
export class AppFormControlError extends Vue
{
	@Prop( String ) when: string;
	@Prop( String ) message: string;

	mounted()
	{
		this.setOverride();
	}

	@Watch( 'message' )
	onMessageChange()
	{
		this.setOverride();
	}

	private setOverride()
	{
		const errors = findVueParent( this, AppFormControlErrors ) as AppFormControlErrors;
		errors.setMessageOverride( this.when, this.message );
	}

	render( h: Vue.CreateElement )
	{
		return h( 'span' );
	}
}

import Vue from 'vue';
import { Component, Prop } from 'vue-property-decorator';

import { findVueParent } from '../../../utils/vue';
import { AppFormControlErrors } from './control-errors';

@Component({})
export class AppFormControlError extends Vue
{
	@Prop( String ) when: string;

	mounted()
	{
		const defaultSlot = this.$slots.default[0];
		const errors = findVueParent( this, AppFormControlErrors ) as AppFormControlErrors;

		if ( defaultSlot.text ) {
			errors.setMessageOverride( this.when, defaultSlot.text );
		}
	}

	render( h: Vue.CreateElement )
	{
		return h( 'span' );
	}
}

--- 
+++ 
@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import { Component, Prop } from 'vue-property-decorator';
+import { Component, Prop, Watch } from 'vue-property-decorator';
 
 import { findVueParent } from '../../../utils/vue';
 import { AppFormControlErrors } from './control-errors';
@@ -8,15 +8,23 @@
 export class AppFormControlError extends Vue
 {
 	@Prop( String ) when: string;
+	@Prop( String ) message: string;
 
 	mounted()
 	{
-		const defaultSlot = this.$slots.default[0];
+		this.setOverride();
+	}
+
+	@Watch( 'message' )
+	onMessageChange()
+	{
+		this.setOverride();
+	}
+
+	private setOverride()
+	{
 		const errors = findVueParent( this, AppFormControlErrors ) as AppFormControlErrors;
-
-		if ( defaultSlot.text ) {
-			errors.setMessageOverride( this.when, defaultSlot.text );
-		}
+		errors.setMessageOverride( this.when, this.message );
 	}
 
 	render( h: Vue.CreateElement )
Fix form control error overrides not being translatable
