Add model watch to City Autocomplete

We display multiple city fields on our donation form, one for
each address type. These fields each have their own
internal state for holding their value, and they emit events
to update the model. When the model was changed by one
city field it wasn't being picked up by the others meaning
if a donor changed their address type after selecting a
city the other city field would be blank.

This adds a watcher for changes in the model value and
updates the internal state when it changes.

Ticket: https://phabricator.wikimedia.org/T397635

Author: Abban

src/components/shared/form_fields/CityAutocompleteField.vue

@@ -181,6 +181,10 @@ watch( city, ( newCity: string ) => {
 	emit( 'update:modelValue', newCity );
 } );
 
+watch( () => props.modelValue, ( newValue: string ) => {
+	city.value = newValue;
+} );
+
 </script>
 
 <style lang="scss">

tests/unit/components/shared/form_fields/CityAutocompleteField.spec.ts

@@ -261,4 +261,14 @@ describe( 'CityAutocompleteField.vue', () => {
 
 		expect( wrapper.emitted( 'field-changed' ).length ).toStrictEqual( 1 );
 	} );
+
+	it( 'updates value on model change', async () => {
+		const wrapper = getWrapper();
+
+		expect( wrapper.find<HTMLInputElement>( '#city' ).element.value ).toBe( '' );
+
+		await wrapper.setProps( { modelValue: 'Berlin' } );
+
+		expect( wrapper.find<HTMLInputElement>( '#city' ).element.value ).toBe( 'Berlin' );
+	} );
 } );