fix(compiler-core): No access this through function declaration in <script setup>

packages/compiler-core/__tests__/transforms/transformExpressions.spec.ts

@@ -492,6 +492,7 @@ describe('compiler: expression transform', () => {
       props: BindingTypes.PROPS,
       setup: BindingTypes.SETUP_MAYBE_REF,
       setupConst: BindingTypes.SETUP_CONST,
+      setupLet: BindingTypes.SETUP_LET,
       data: BindingTypes.DATA,
       options: BindingTypes.OPTIONS
     }
@@ -531,5 +532,15 @@ describe('compiler: expression transform', () => {
       expect(code).toMatch(`_ctx.options`)
       expect(code).toMatchSnapshot()
     })
+
+    // #6822
+    test('no access this through function declaration', () => {
+      const { code } = compileWithBindingMetadata(
+        `<div @click="setupConst()" @keyup="setupLet()" @keydown="setup()"></div>`
+      )
+      expect(code).toMatch(`$setup.setupConst.bind()`)
+      expect(code).toMatch(`$setup.setupLet.bind()`)
+      expect(code).toMatch(`$setup.setup.bind()`)
+    })
   })
 })

packages/compiler-core/src/transforms/transformExpression.ts

@@ -199,7 +199,10 @@ export function processExpression(
     } else {
       if (type && type.startsWith('setup')) {
         // setup bindings in non-inline mode
-        return `$setup.${raw}`
+        // #6822 No access `this` through function declaration in <script setup>
+        return parent && parent.type === 'CallExpression'
+          ? `$setup.${raw}.bind()`
+          : `$setup.${raw}`
       } else if (type === BindingTypes.PROPS_ALIASED) {
         return `$props['${bindingMetadata.__propsAliases![raw]}']`
       } else if (type) {

packages/compiler-core/src/transforms/vOn.ts

@@ -120,7 +120,11 @@ export const transformOn: DirectiveTransform = (
       // avoiding the need to be patched.
       if (shouldCache && isMemberExp) {
         if (exp.type === NodeTypes.SIMPLE_EXPRESSION) {
-          exp.content = `${exp.content} && ${exp.content}(...args)`
+          if (exp.content.startsWith('$setup')) {
+            exp.content = `${exp.content} && ${exp.content}.call(undefined, ...args)`
+          } else {
+            exp.content = `${exp.content} && ${exp.content}(...args)`
+          }
         } else {
           exp.children = [...exp.children, ` && `, ...exp.children, `(...args)`]
         }