defineModel 과 defineProps 의 차이

// 기존 props + emits 기반 분기 로직
const props = defineProps<{
  modelValue?: string
  modelObject?: SelectOption
}>()

const emits = defineEmits<{
  (e: 'update:modelValue', value: string): void
  (e: 'update:modelObject', option: SelectOption): void
}>()

const currentValue = computed(() => {
  if (exists(props.modelValue)) {
    return props.modelValue
  } else if (props.modelObject) {
    return props.modelObject.value
  } else {
    return null
  }
})

function selectItem(item: SelectOption) {
  emits('update:modelValue', item.value)
  emits('update:modelObject', item)
}

// defineModel() 기반으로 리팩터링한 코드
const modelValue = defineModel<string>()
const modelObject = defineModel<SelectOption>('modelObject')

const currentValue = computed(() => {
  if (exists(modelValue.value)) {
    return modelValue.value
  } else if (modelObject.value) {
    return modelObject.value.value
  } else {
    return null
  }
})

function selectItem(item: SelectOption) {
  // defineModel이 반환한 ref에 직접 할당
  modelValue.value = item.value
  modelObject.value = item
}