[Vuejs]-Vuetify: autocomplete components unable to build as the expected

Using v-select is a better component to use if the user shouldn’t be able to type anything in the selection box. The v-select API documentation lists a selection slot to customize the appearance of the selected item. Using this slot you can choose to show only the first character, which matches your requirements for "1 Room" to display as "1".

<template>
  <v-select v-model="tempForm.roomCMS" :items="rooms" outlined label="Rooms">
    <template v-slot:selection="{ item }">
      {{ item.charAt(0) }}
    </template>
  </v-select>
</template>

<script>
export default {
  data() {
    return {
      tempForm: {
        roomCMS: 1
      },
      rooms: ['1 Room', '2 Rooms', '3 Rooms', '4 Rooms', '5 Rooms', '6 Rooms', '7 Rooms', '8 Rooms']
    };
  }
};
</script>

codepen demo