fix(compiler-sfc): handle kebab-case shorthand bindings in import usa…

…ge check

packages/compiler-sfc/__tests__/compileScript/importUsageCheck.spec.ts

@@ -250,3 +250,18 @@ test('check when has explicit parse options', () => {
   )
   expect(content).toMatch('return { get x() { return x } }')
 })
+
+test('shorthand binding w/ kebab-case', () => {
+  const { content } = compile(
+    `
+    <script setup lang="ts">
+      import { fooBar } from "./foo.ts"
+    </script>
+
+    <template>
+      <div :foo-bar></div>
+    </template>
+    `,
+  )
+  expect(content).toMatch('return { get fooBar() { return fooBar }')
+})

packages/compiler-sfc/src/script/importUsageCheck.ts

@@ -8,15 +8,21 @@ import {
   walkIdentifiers,
 } from '@vue/compiler-dom'
 import { createCache } from '../cache'
-import { camelize, capitalize, isBuiltInDirective } from '@vue/shared'
+import {
+  camelize,
+  capitalize,
+  hyphenate,
+  isBuiltInDirective,
+} from '@vue/shared'
 
 /**
  * Check if an import is used in the SFC's template. This is used to determine
  * the properties that should be included in the object returned from setup()
  * when not using inline mode.
  */
 export function isImportUsed(local: string, sfc: SFCDescriptor): boolean {
-  return resolveTemplateUsedIdentifiers(sfc).has(local)
+  const set = resolveTemplateUsedIdentifiers(sfc)
+  return set.has(local) || set.has(hyphenate(local))
 }
 
 const templateUsageCheckCache = createCache<Set<string>>()