Multiple v-models in Vue 3

AddressInput.vue

<template>
  <input type="text" :value="address" @input="$emit('update:address', $event.target.value)">
  <input type="text" :value="city" @input="$emit('update:city', $event.target.value)">
  <input type="text" :value="region" @input="$emit('update:region', $event.target.value)">
  <input type="text" :value="country" @input="$emit('update:country', $event.target.value)">
  <input type="text" :value="postal" @input="$emit('update:postal', $event.target.value)">
</template>

<script setup>
import { defineProps } from 'vue'

defineProps({
  address: String,
  city: String,
  country: String,
  region: String,
  postal: String,
})
</script>

Form.vue

<template>
  <label>Address:</label>
  <AddressInput
      v-model:address="form.address"
      v-model:city="form.city"
      v-model:region="form.region"
      v-model:country="form.country"
      v-model:postal="form.postal"
  />
  <div>Your address is:</div>
  <address>
    {{ form.address }}<br>
    {{ form.city }}, {{ form.region }}<br>
    {{ form.country }} {{ form.postal }}
  </address>
</template>

<script setup>
import { reactive } from 'vue'
import AddressInput from './components/AddressInput.vue'

const form = reactive({
  address: '123 Example Drive',
  city: 'Toronto',
  region: 'Ontario',
  country: 'Canada',
  postal: 'A0B 1C2',
})
</script>