Vue3 defineEmits is a compiler macro and no longer needs to be imported

I’m getting this warning in the terminal from my Vue 3.4 app

[@vue/compiler-sfc] defineEmits is a compiler macro and no longer needs to be imported.

The problem is, if I remove defineEmits then the logic breaks and a emit is not defined error pops up.

Question:

How do I remove defineEmits from the import since that’s deprecated, and not have my app break due to an undefined emit?

My SearchHeader.vue component

<script setup lang="ts">
import { ref, watch, defineEmits } from 'vue'
import coins_to_search from '../constants/coins-to-search'
import type { Coin } from '../constants/coins-to-search'

const emit = defineEmits(['coinSelected'])
const inputValue = ref('')
const filteredCoins = ref<Coin[]>([])

watch(inputValue, (newValue: string) => {
  if (newValue.length === 0) {
    filterCoins('  ')
  }

  if (newValue.length > 1) {
    filterCoins(newValue)
  }
  console.log('filteredCoins', filteredCoins.value)
})

const filterCoins = (input: string) => {
  filteredCoins.value = coins_to_search.filter(
    coin =>
      coin.name.toLowerCase().includes(input.toLowerCase()) ||
      coin.id.toLowerCase().includes(input.toLowerCase())
  )
}

const selectCoin = (value: string) => {
  console.log(value)
  filterCoins('  ')
  if (value) {
    emit('coinSelected', value)
  }
}

// Initialize filteredCoins with an empty array
filterCoins('  ')
</script>

<template>
  <div id="search-container">
    <header class="flex items-center justify-between">
      <div class="flex w-full flex-wrap md:flex-nowrap gap-4">
        <input
          type="text"
          color="default"
          label="Coin Search"
          placeholder="Search Coins"
          v-model="inputValue"
        />
        <div v-if="filteredCoins.length > 0" class="search-selection">
          <ul>
            <li
              v-for="coin in filteredCoins"
              :key="coin.id"
              @click="selectCoin(coin.name)"
            >
              {{ coin.name }}
            </li>
          </ul>
        </div>
      </div>
    </header>
  </div>
</template>

---

If I remove the defineEmit import, and just use emit('coinSelected', value)

I get no warnings in the terminal, but when I search and select a coin the app is now broken:

Uncaught ReferenceError: emit is not defined
at Proxy.selectCoin (SearchHeader.vue:33:5)