diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9ac9f23ea7..f61d43d986 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,7 @@
 # Changelog
 
+- 🙌 Autocomplete for custom events. Thanks to contribution from [@sapphi-red](https://github.com/sapphi-red) #2392.
+
 ### 0.31.1 | 2020-12-09 | [VSIX](https://marketplace.visualstudio.com/_apis/public/gallery/publishers/octref/vsextensions/vetur/0.31.1/vspackage)
 
 - Fix `Vetur` can't format. #2535 #2538 #2531 #2532
diff --git a/server/src/modes/script/componentInfo.ts b/server/src/modes/script/componentInfo.ts
index 48c0ad889d..5498d73263 100644
--- a/server/src/modes/script/componentInfo.ts
+++ b/server/src/modes/script/componentInfo.ts
@@ -1,8 +1,10 @@
+import _ from 'lodash';
 import type ts from 'typescript';
 import { BasicComponentInfo } from '../../config';
 import { RuntimeLibrary } from '../../services/dependencyService';
 import {
   VueFileInfo,
+  EmitInfo,
   PropInfo,
   ComputedInfo,
   DataInfo,
@@ -87,6 +89,7 @@ export function analyzeDefaultExportExpr(
   const defaultExportType = checker.getTypeAtLocation(defaultExportNode);
 
   const insertInOptionAPIPos = getInsertInOptionAPIPos(tsModule, defaultExportType, checker);
+  const emits = getEmits(tsModule, defaultExportType, checker);
   const props = getProps(tsModule, defaultExportType, checker);
   const data = getData(tsModule, defaultExportType, checker);
   const computed = getComputed(tsModule, defaultExportType, checker);
@@ -95,6 +98,7 @@ export function analyzeDefaultExportExpr(
   return {
     componentInfo: {
       insertInOptionAPIPos,
+      emits,
       props,
       data,
       computed,
@@ -137,6 +141,184 @@ function getInsertInOptionAPIPos(
   return undefined;
 }
 
+function getEmits(
+  tsModule: RuntimeLibrary['typescript'],
+  defaultExportType: ts.Type,
+  checker: ts.TypeChecker
+): EmitInfo[] | undefined {
+  // When there is @Emit and emits option both, use only emits option.
+  const result: EmitInfo[] = getClassAndObjectInfo(
+    tsModule,
+    defaultExportType,
+    checker,
+    getClassEmits,
+    getObjectEmits,
+    true
+  );
+
+  return result.length === 0 ? undefined : result;
+
+  function getEmitValidatorInfo(propertyValue: ts.Node): { hasValidator: boolean; typeString?: string } {
+    /**
+     * case `foo: null`
+     */
+    if (propertyValue.kind === tsModule.SyntaxKind.NullKeyword) {
+      return { hasValidator: false };
+    }
+
+    /**
+     * case `foo: function() {}` or `foo: () => {}`
+     */
+    if (tsModule.isFunctionExpression(propertyValue) || tsModule.isArrowFunction(propertyValue)) {
+      let typeParameterText = '';
+      if (propertyValue.typeParameters) {
+        typeParameterText = `<${propertyValue.typeParameters.map(tp => tp.getText()).join(', ')}>`;
+      }
+      const parameterText = `(${propertyValue.parameters
+        .map(p => `${p.getText()}${p.type ? '' : ': any'}`)
+        .join(', ')})`;
+      const typeString = `${typeParameterText}${parameterText} => any`;
+      return { hasValidator: true, typeString };
+    }
+
+    return { hasValidator: false };
+  }
+
+  function getClassEmits(type: ts.Type) {
+    const emitDecoratorNames = ['Emit'];
+    const emitsSymbols = type
+      .getProperties()
+      .filter(
+        property =>
+          validPropertySyntaxKind(property, tsModule.SyntaxKind.MethodDeclaration) &&
+          getPropertyDecoratorNames(property).some(decoratorName => emitDecoratorNames.includes(decoratorName))
+      );
+    if (emitsSymbols.length === 0) {
+      return undefined;
+    }
+
+    // There maybe same emit name because @Emit can be put on multiple methods.
+    const emitInfoMap = new Map<string, EmitInfo>();
+    emitsSymbols.forEach(emitSymbol => {
+      const emit = emitSymbol.valueDeclaration as ts.MethodDeclaration;
+      const decoratorExpr = emit.decorators?.find(decorator =>
+        tsModule.isCallExpression(decorator.expression)
+          ? emitDecoratorNames.includes(decorator.expression.expression.getText())
+          : false
+      )?.expression as ts.CallExpression;
+      const decoratorArgs = decoratorExpr.arguments;
+
+      let name = _.kebabCase(emitSymbol.name);
+      if (decoratorArgs.length > 0) {
+        const firstNode = decoratorArgs[0];
+        if (tsModule.isStringLiteral(firstNode)) {
+          name = firstNode.text;
+        }
+      }
+
+      let typeString: string | undefined = undefined;
+      const signature = checker.getSignatureFromDeclaration(emit);
+      if (signature) {
+        const returnType = checker.getReturnTypeOfSignature(signature);
+        typeString = `(${checker.typeToString(returnType)})`;
+        if (typeString === '(void)') {
+          typeString = '(undefined)';
+        }
+      }
+
+      if (emitInfoMap.has(name)) {
+        const oldEmitInfo = emitInfoMap.get(name)!;
+        if (typeString) {
+          // create union type
+          oldEmitInfo.typeString += ` | ${typeString}`;
+        } else {
+          // remove type (because it failed to obtain the type)
+          oldEmitInfo.typeString = undefined;
+        }
+        oldEmitInfo.documentation += `\n\n${buildDocumentation(tsModule, emitSymbol, checker)}`;
+        emitInfoMap.set(name, oldEmitInfo);
+      } else {
+        emitInfoMap.set(name, {
+          name,
+          hasValidator: false,
+          typeString,
+          documentation: buildDocumentation(tsModule, emitSymbol, checker)
+        });
+      }
+    });
+
+    const emitInfo = [...emitInfoMap.values()];
+    emitInfo.forEach(info => {
+      if (info.typeString) {
+        info.typeString = `(arg: ${info.typeString}) => any`;
+      }
+    });
+
+    return emitInfo;
+  }
+
+  function getObjectEmits(type: ts.Type) {
+    const emitsSymbol = checker.getPropertyOfType(type, 'emits');
+    if (!emitsSymbol || !emitsSymbol.valueDeclaration) {
+      return undefined;
+    }
+
+    const emitsDeclaration = getLastChild(emitsSymbol.valueDeclaration);
+    if (!emitsDeclaration) {
+      return undefined;
+    }
+
+    /**
+     * Plain array emits like `emits: ['foo', 'bar']`
+     */
+    if (emitsDeclaration.kind === tsModule.SyntaxKind.ArrayLiteralExpression) {
+      return (emitsDeclaration as ts.ArrayLiteralExpression).elements
+        .filter(expr => expr.kind === tsModule.SyntaxKind.StringLiteral)
+        .map(expr => {
+          return {
+            name: (expr as ts.StringLiteral).text,
+            hasValidator: false,
+            documentation: `\`\`\`js\n${formatJSLikeDocumentation(
+              emitsDeclaration.parent.getFullText().trim()
+            )}\n\`\`\`\n`
+          };
+        });
+    }
+
+    /**
+     * Object literal emits like
+     * ```
+     * {
+     *   emits: {
+     *     foo: () => true,
+     *     bar: (arg1: string, arg2: number) => arg1.startsWith('s') || arg2 > 0,
+     *     car: null
+     *   }
+     * }
+     * ```
+     */
+    if (emitsDeclaration.kind === tsModule.SyntaxKind.ObjectLiteralExpression) {
+      const emitsType = checker.getTypeOfSymbolAtLocation(emitsSymbol, emitsDeclaration);
+
+      return checker.getPropertiesOfType(emitsType).map(s => {
+        const node = getNodeFromSymbol(s);
+        const status =
+          node !== undefined && tsModule.isPropertyAssignment(node)
+            ? getEmitValidatorInfo(node.initializer)
+            : { hasValidator: false };
+
+        return {
+          name: s.name,
+          ...status,
+          documentation: buildDocumentation(tsModule, s, checker)
+        };
+      });
+    }
+
+    return undefined;
+  }
+}
+
 function getProps(
   tsModule: RuntimeLibrary['typescript'],
   defaultExportType: ts.Type,
@@ -646,15 +828,18 @@ function getClassAndObjectInfo<C, O>(
   defaultExportType: ts.Type,
   checker: ts.TypeChecker,
   getClassResult: (type: ts.Type) => C[] | undefined,
-  getObjectResult: (type: ts.Type) => O[] | undefined
+  getObjectResult: (type: ts.Type) => O[] | undefined,
+  onlyUseObjectResultIfExists = false
 ) {
   const result: Array<C | O> = [];
   if (isClassType(tsModule, defaultExportType)) {
-    result.push.apply(result, getClassResult(defaultExportType) || []);
     const decoratorArgumentType = getClassDecoratorArgumentType(tsModule, defaultExportType, checker);
     if (decoratorArgumentType) {
       result.push.apply(result, getObjectResult(decoratorArgumentType) || []);
     }
+    if (result.length === 0 || !onlyUseObjectResultIfExists) {
+      result.push.apply(result, getClassResult(defaultExportType) || []);
+    }
   } else {
     result.push.apply(result, getObjectResult(defaultExportType) || []);
   }
diff --git a/server/src/modes/template/tagProviders/componentInfoTagProvider.ts b/server/src/modes/template/tagProviders/componentInfoTagProvider.ts
index 4d3091428e..1ce588e721 100644
--- a/server/src/modes/template/tagProviders/componentInfoTagProvider.ts
+++ b/server/src/modes/template/tagProviders/componentInfoTagProvider.ts
@@ -16,10 +16,13 @@ export function getComponentInfoTagProvider(childComponents: ChildComponent[]):
   const tagSet: ITagSet = {};
 
   for (const cc of childComponents) {
-    const props: Attribute[] = [];
-    if (cc.info && cc.info.componentInfo.props) {
-      cc.info.componentInfo.props.forEach(p => {
-        props.push(genAttribute(`:${p.name}`, undefined, { kind: 'markdown', value: p.documentation || '' }));
+    const attributes: Attribute[] = [];
+    if (cc.info) {
+      cc.info.componentInfo.props?.forEach(p => {
+        attributes.push(genAttribute(`:${p.name}`, undefined, { kind: 'markdown', value: p.documentation || '' }));
+      });
+      cc.info.componentInfo.emits?.forEach(e => {
+        attributes.push(genAttribute(e.name, 'event', { kind: 'markdown', value: e.documentation || '' }));
       });
     }
     tagSet[cc.name] = new HTMLTagSpecification(
@@ -27,7 +30,7 @@ export function getComponentInfoTagProvider(childComponents: ChildComponent[]):
         kind: 'markdown',
         value: cc.documentation || ''
       },
-      props
+      attributes
     );
   }
 
diff --git a/server/src/services/typescriptService/preprocess.ts b/server/src/services/typescriptService/preprocess.ts
index d344195804..b7a10c7ba7 100644
--- a/server/src/services/typescriptService/preprocess.ts
+++ b/server/src/services/typescriptService/preprocess.ts
@@ -322,9 +322,25 @@ function convertChildComponentsInfoToSource(childComponents: ChildComponent[]) {
     });
     propTypeStrings.push('[other: string]: any');
 
+    const onTypeStrings: string[] = [];
+    c.info?.componentInfo.emits?.forEach(e => {
+      let typeKey = kebabCase(e.name);
+      if (typeKey.includes('-')) {
+        typeKey = `'` + typeKey + `'`;
+      }
+      typeKey += '?';
+
+      if (e.typeString) {
+        onTypeStrings.push(`${typeKey}: ($event: any) => (${e.typeString})`);
+      } else {
+        onTypeStrings.push(`${typeKey}: ($event: any) => any`);
+      }
+    });
+
     src += `
 interface ${componentDataInterfaceName}<T> extends ${componentDataName}<T> {
   props: { ${propTypeStrings.join(', ')} }
+  on: { ${onTypeStrings.join(', ')} } & { [K in keyof T]?: ($event: T[K]) => any; }
 }
 declare const ${componentHelperInterfaceName}: {
   <T>(
diff --git a/server/src/services/typescriptService/transformTemplate.ts b/server/src/services/typescriptService/transformTemplate.ts
index 2657b9e439..bb00180c47 100644
--- a/server/src/services/typescriptService/transformTemplate.ts
+++ b/server/src/services/typescriptService/transformTemplate.ts
@@ -210,7 +210,7 @@ export function getTemplateTransformFunctions(
         const newScope = scope.concat(vOnScope);
         const statements =
           !vOnExp || vOnExp.type !== 'VOnExpression'
-            ? [tsModule.createExpressionStatement(transformExpressionContainer(vOn.value, code, newScope))]
+            ? [tsModule.createReturn(transformExpressionContainer(vOn.value, code, newScope))]
             : vOnExp.body.map(st => transformStatement(st, code, newScope));
 
         exp = tsModule.createFunctionExpression(
diff --git a/server/src/services/vueInfoService.ts b/server/src/services/vueInfoService.ts
index d0816941e3..e0b147081b 100644
--- a/server/src/services/vueInfoService.ts
+++ b/server/src/services/vueInfoService.ts
@@ -26,6 +26,7 @@ export interface ComponentInfo {
   };
   childComponents?: ChildComponent[];
 
+  emits?: EmitInfo[];
   /**
    * Todo: Extract type info in cases like
    * props: {
@@ -50,6 +51,24 @@ export interface ChildComponent {
   info?: VueFileInfo;
 }
 
+export interface EmitInfo {
+  name: string;
+  /**
+   * `true` if
+   * emits: {
+   *   foo: (...) => {...}
+   * }
+   *
+   * `false` if
+   * - `emits: ['foo']`
+   * - `@Emit()`
+   * - `emits: { foo: null }`
+   */
+  hasValidator: boolean;
+  documentation?: string;
+  typeString?: string;
+}
+
 export interface PropInfo {
   name: string;
   /**
diff --git a/test/interpolation/features/completion/property.test.ts b/test/interpolation/features/completion/property.test.ts
index 1a9a3d69fb..a812773e2e 100644
--- a/test/interpolation/features/completion/property.test.ts
+++ b/test/interpolation/features/completion/property.test.ts
@@ -100,6 +100,37 @@ describe('Should autocomplete interpolation for <template> in property class com
       await testCompletion(parentTemplateDocUri, position(4, 24), propsList);
     });
 
+    it(`completes child component's emits`, async () => {
+      await testCompletion(parentTemplateDocUri, position(2, 35), [
+        {
+          label: 'baz',
+          kind: CompletionItemKind.Function,
+          documentation: new MarkdownString('My baz')
+            .appendCodeblock(
+              `@Emit('baz')
+baz() {}`,
+              'js'
+            )
+            .appendText('\n')
+            .appendMarkdown('My baz2')
+            .appendCodeblock(
+              `@Emit('baz')
+baz2() {}`,
+              'js'
+            )
+        },
+        {
+          label: 'foo-bar',
+          kind: CompletionItemKind.Function,
+          documentation: new MarkdownString('My fooBar').appendCodeblock(
+            `@Emit()
+fooBar() {}`,
+            'js'
+          )
+        }
+      ]);
+    });
+
     it('completes inside v-if=""', async () => {
       await testCompletion(parentTemplateDocUri, position(3, 32), defaultList);
     });
diff --git a/test/interpolation/features/diagnostics/propsValidation.test.ts b/test/interpolation/features/diagnostics/propsValidation.test.ts
index e45d93a3c3..31c5bb1ccd 100644
--- a/test/interpolation/features/diagnostics/propsValidation.test.ts
+++ b/test/interpolation/features/diagnostics/propsValidation.test.ts
@@ -86,22 +86,22 @@ describe('Should find common diagnostics for all regions', () => {
   it('shows errors or warnings for passing wrong props to child component when using class component', async () => {
     const expectedDiagnostics: vscode.Diagnostic[] = [
       {
-        message: '<class-child> misses props: bar, ear, far, name, checked, foo',
+        message: '<class-child> misses props: foo, bar, ear, far, name, checked',
         severity: vscode.DiagnosticSeverity.Error,
         range: sameLineRange(15, 4, 19)
       },
       {
-        message: '<class-child> misses props: bar, far, name, checked, foo',
+        message: '<class-child> misses props: foo, bar, far, name, checked',
         severity: vscode.DiagnosticSeverity.Error,
         range: sameLineRange(16, 4, 29)
       },
       {
-        message: '<class-child> misses props: bar, far, name, foo',
+        message: '<class-child> misses props: foo, bar, far, name',
         severity: vscode.DiagnosticSeverity.Warning,
         range: sameLineRange(17, 4, 45)
       },
       {
-        message: '<class-child> misses props: bar, far, name, foo',
+        message: '<class-child> misses props: foo, bar, far, name',
         severity: vscode.DiagnosticSeverity.Warning,
         range: sameLineRange(18, 4, 51)
       }
diff --git a/test/interpolation/fixture/completion/propertyDecorator/Child.vue b/test/interpolation/fixture/completion/propertyDecorator/Child.vue
index 2b5f41623d..799488f412 100644
--- a/test/interpolation/fixture/completion/propertyDecorator/Child.vue
+++ b/test/interpolation/fixture/completion/propertyDecorator/Child.vue
@@ -7,7 +7,7 @@
 
 <script>
 import Vue from 'vue'
-import { Prop, Component } from 'vue-property-decorator'
+import { Prop, Component, Emit } from 'vue-property-decorator'
 
 /**
  * My basic tag
@@ -57,5 +57,23 @@ export default class BasicPropertyClass extends Vue {
   hello () {
     console.log(this.msg)
   }
+
+  /**
+   * My baz
+   */
+  @Emit('baz')
+  baz() {}
+
+  /**
+   * My fooBar
+   */
+  @Emit()
+  fooBar() {}
+
+  /**
+   * My baz2
+   */
+  @Emit('baz')
+  baz2() {}
 }
 </script>
diff --git a/test/interpolation/fixture/completion/propertyDecorator/Parent.vue b/test/interpolation/fixture/completion/propertyDecorator/Parent.vue
index 51f70b8dd1..aafdd2676a 100644
--- a/test/interpolation/fixture/completion/propertyDecorator/Parent.vue
+++ b/test/interpolation/fixture/completion/propertyDecorator/Parent.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <basic-property-class :foo=""></basic-property-class>
+    <basic-property-class :foo="" @></basic-property-class>
     <basic-property-class v-if="" @click="" :foo=""></basic-property-class>
     <BasicPropertyClass  />
     <
diff --git a/test/vue3/features/completion/interpolation.test.ts b/test/vue3/features/completion/interpolation.test.ts
new file mode 100644
index 0000000000..290b7d6332
--- /dev/null
+++ b/test/vue3/features/completion/interpolation.test.ts
@@ -0,0 +1,20 @@
+import { CompletionItem, CompletionItemKind, MarkdownString } from 'vscode';
+import { position } from '../../../util';
+import { testCompletion, testNoSuchCompletion } from '../../../completionHelper';
+import { getDocUri } from '../../path';
+
+describe('Should autocomplete interpolation for <template>', () => {
+  const parentTemplateDocUri = getDocUri('completion/interpolation/Parent.vue');
+
+  describe('Should complete emits', () => {
+    it(`completes child component's emits`, async () => {
+      await testCompletion(parentTemplateDocUri, position(1, 10), [
+        {
+          label: 'foo',
+          kind: CompletionItemKind.Function,
+          documentation: new MarkdownString('My foo').appendCodeblock(`foo: () => true`, 'js')
+        }
+      ]);
+    });
+  });
+});
diff --git a/test/vue3/features/completion/interpolationClassComponent.test.ts b/test/vue3/features/completion/interpolationClassComponent.test.ts
new file mode 100644
index 0000000000..422b8a0ad8
--- /dev/null
+++ b/test/vue3/features/completion/interpolationClassComponent.test.ts
@@ -0,0 +1,20 @@
+import { CompletionItem, CompletionItemKind, MarkdownString } from 'vscode';
+import { position } from '../../../util';
+import { getDocUri } from '../../path';
+import { testCompletion, testNoSuchCompletion } from '../../../completionHelper';
+
+describe('Should autocomplete interpolation for <template> in class component', () => {
+  const parentTemplateDocUri = getDocUri('completion/interpolation/classComponent/Parent.vue');
+
+  describe('Should complete emits', () => {
+    it(`completes child component's emits`, async () => {
+      await testCompletion(parentTemplateDocUri, position(1, 16), [
+        {
+          label: 'foo',
+          kind: CompletionItemKind.Function,
+          documentation: new MarkdownString('My foo').appendCodeblock(`foo: () => true`, 'js')
+        }
+      ]);
+    });
+  });
+});
diff --git a/test/vue3/features/completion/interpolationProperty.test.ts b/test/vue3/features/completion/interpolationProperty.test.ts
new file mode 100644
index 0000000000..f79e33043a
--- /dev/null
+++ b/test/vue3/features/completion/interpolationProperty.test.ts
@@ -0,0 +1,51 @@
+import { CompletionItem, CompletionItemKind, MarkdownString } from 'vscode';
+import { getDocUri } from '../../path';
+import { testCompletion, testNoSuchCompletion } from '../../../completionHelper';
+import { position } from '../../../util';
+
+describe('Should autocomplete interpolation for <template> in property class component', () => {
+  const parentTemplateDocUri = getDocUri('completion/interpolation/propertyDecorator/Parent.vue');
+
+  describe('Should complete emits', () => {
+    it(`completes child component's emits`, async () => {
+      await testCompletion(parentTemplateDocUri, position(1, 25), [
+        {
+          label: 'foo',
+          kind: CompletionItemKind.Function,
+          documentation: new MarkdownString('My foo')
+            .appendCodeblock(
+              `@Emit('foo')
+foo() {}`,
+              'js'
+            )
+            .appendText('\n')
+            .appendMarkdown('My foo2')
+            .appendCodeblock(
+              `@Emit('foo')
+foo2() {}`,
+              'js'
+            )
+        },
+        {
+          label: 'foo-bar',
+          kind: CompletionItemKind.Function,
+          documentation: new MarkdownString('My fooBar').appendCodeblock(
+            `@Emit()
+fooBar() {}`,
+            'js'
+          )
+        }
+      ]);
+    });
+
+    it(`completes child component's emits only with emits option`, async () => {
+      await testCompletion(parentTemplateDocUri, position(2, 36), [
+        {
+          label: 'foo',
+          kind: CompletionItemKind.Function,
+          documentation: new MarkdownString('My foo emits').appendCodeblock(`foo: () => true`, 'js')
+        }
+      ]);
+    });
+  });
+});
diff --git a/test/vue3/features/diagnostics/emitTypeValidation.test.ts b/test/vue3/features/diagnostics/emitTypeValidation.test.ts
new file mode 100644
index 0000000000..d4d2c766f4
--- /dev/null
+++ b/test/vue3/features/diagnostics/emitTypeValidation.test.ts
@@ -0,0 +1,97 @@
+import { getDocUri } from '../../path';
+import { testDiagnostics, testNoDiagnostics } from '../../../diagnosticHelper';
+import { sameLineRange } from '../../../util';
+import { DiagnosticSeverity } from 'vscode';
+
+describe('Should find emit type valiation errors', () => {
+  const rightUri = getDocUri('diagnostics/emitTypeValidation/ParentRight.vue');
+  const wrongUri = getDocUri('diagnostics/emitTypeValidation/ParentWrong.vue');
+
+  it('Shows no error for correct types', async () => {
+    await testNoDiagnostics(rightUri);
+  });
+
+  it('Shows errors for incorrect types', async () => {
+    await testDiagnostics(wrongUri, [
+      {
+        severity: DiagnosticSeverity.Error,
+        message:
+          "Type '($event: any) => (p: number) => void' is not assignable to type '($event: any) => () => any'.\n  Type '(p: number) => void' is not assignable to type '() => any'.",
+        range: sameLineRange(1, 28, 31),
+        source: 'Vetur'
+      },
+      {
+        severity: DiagnosticSeverity.Error,
+        message:
+          "Type '($event: any) => (a: boolean, b: string) => void' is not assignable to type '($event: any) => (a: any) => any'.\n  Type '(a: boolean, b: string) => void' is not assignable to type '(a: any) => any'.",
+        range: sameLineRange(1, 41, 44),
+        source: 'Vetur',
+        code: 2322
+      },
+      {
+        severity: DiagnosticSeverity.Error,
+        message:
+          "Type '($event: any) => (a: boolean, b: string[], c: number) => void' is not assignable to type '($event: any) => (a: any, b: any) => any'.\n  Type '(a: boolean, b: string[], c: number) => void' is not assignable to type '(a: any, b: any) => any'.",
+        range: sameLineRange(1, 54, 57),
+        source: 'Vetur',
+        code: 2322
+      },
+      {
+        severity: DiagnosticSeverity.Error,
+        message:
+          "Type '($event: any) => (...args: never[]) => void' is not assignable to type '($event: any) => (a: any, ...args: any) => any'.\n  Type '(...args: never[]) => void' is not assignable to type '(a: any, ...args: any) => any'.\n    Types of parameters 'args' and 'a' are incompatible.\n      Type 'any' is not assignable to type 'never'.",
+        range: sameLineRange(1, 67, 71),
+        source: 'Vetur',
+        code: 2322
+      },
+      {
+        severity: DiagnosticSeverity.Error,
+        message:
+          "Type '($event: any) => (p: number) => void' is not assignable to type '($event: any) => () => any'.\n  Type '(p: number) => void' is not assignable to type '() => any'.",
+        range: sameLineRange(2, 28, 31),
+        source: 'Vetur',
+        code: 2322
+      },
+      {
+        severity: DiagnosticSeverity.Error,
+        message:
+          "Type '($event: any) => (a: boolean, b: string) => void' is not assignable to type '($event: any) => (a: string) => any'.\n  Type '(a: boolean, b: string) => void' is not assignable to type '(a: string) => any'.",
+        range: sameLineRange(2, 41, 44),
+        source: 'Vetur',
+        code: 2322
+      },
+      {
+        severity: DiagnosticSeverity.Error,
+        message:
+          "Type '($event: any) => (a: boolean, b: string[], c: number) => void' is not assignable to type '($event: any) => (a: boolean, b: string[]) => any'.\n  Type '(a: boolean, b: string[], c: number) => void' is not assignable to type '(a: boolean, b: string[]) => any'.",
+        range: sameLineRange(2, 54, 57),
+        source: 'Vetur',
+        code: 2322
+      },
+      {
+        severity: DiagnosticSeverity.Error,
+        message:
+          "Type '($event: any) => (...args: never[]) => void' is not assignable to type '($event: any) => (a: string, ...args: number[]) => any'.\n  Type '(...args: never[]) => void' is not assignable to type '(a: string, ...args: number[]) => any'.\n    Types of parameters 'args' and 'a' are incompatible.\n      Type 'string' is not assignable to type 'never'.",
+        range: sameLineRange(2, 67, 71),
+        source: 'Vetur',
+        code: 2322
+      },
+      {
+        severity: DiagnosticSeverity.Error,
+        message:
+          "Type '($event: any) => (a: number) => void' is not assignable to type '($event: any) => (arg: number | boolean) => any'.\n  Type '(a: number) => void' is not assignable to type '(arg: number | boolean) => any'.\n    Types of parameters 'a' and 'arg' are incompatible.\n      Type 'number | boolean' is not assignable to type 'number'.\n        Type 'boolean' is not assignable to type 'number'.",
+        range: sameLineRange(3, 19, 22),
+        source: 'Vetur',
+        code: 2322
+      },
+      {
+        severity: DiagnosticSeverity.Error,
+        message:
+          "Type '($event: any) => (a: number) => void' is not assignable to type '($event: any) => (arg: number | undefined) => any'.\n  Type '(a: number) => void' is not assignable to type '(arg: number | undefined) => any'.\n    Types of parameters 'a' and 'arg' are incompatible.\n      Type 'number | undefined' is not assignable to type 'number'.\n        Type 'undefined' is not assignable to type 'number'.",
+        range: sameLineRange(3, 32, 35),
+        source: 'Vetur',
+        code: 2322
+      }
+    ]);
+  });
+});
diff --git a/test/vue3/fixture/completion/interpolation/Basic.vue b/test/vue3/fixture/completion/interpolation/Basic.vue
new file mode 100644
index 0000000000..69595745f6
--- /dev/null
+++ b/test/vue3/fixture/completion/interpolation/Basic.vue
@@ -0,0 +1,17 @@
+<template>
+  <div></div>
+</template>
+
+<script>
+/**
+ * My basic tag
+ */
+export default {
+  emits: {
+    /**
+     * My foo
+     */
+    foo: () => true
+  }
+};
+</script>
diff --git a/test/vue3/fixture/completion/interpolation/Parent.vue b/test/vue3/fixture/completion/interpolation/Parent.vue
new file mode 100644
index 0000000000..7dd63587d7
--- /dev/null
+++ b/test/vue3/fixture/completion/interpolation/Parent.vue
@@ -0,0 +1,13 @@
+<template>
+  <basic @></basic>
+</template>
+
+<script>
+import Basic from './Basic.vue'
+
+export default {
+  components: {
+    Basic
+  }
+}
+</script>
diff --git a/test/vue3/fixture/completion/interpolation/classComponent/Child.vue b/test/vue3/fixture/completion/interpolation/classComponent/Child.vue
new file mode 100644
index 0000000000..2d5d1f4aaa
--- /dev/null
+++ b/test/vue3/fixture/completion/interpolation/classComponent/Child.vue
@@ -0,0 +1,22 @@
+<template>
+  <div></div>
+</template>
+
+<script>
+import Vue from 'vue'
+import { Options } from 'vue-class-component'
+
+/**
+ * My basic tag
+ */
+@Options({
+  emits: {
+    /**
+     * My foo
+     */
+    foo: () => true
+  }
+})
+export default class BasicClass extends Vue {
+}
+</script>
diff --git a/test/vue3/fixture/completion/interpolation/classComponent/Parent.vue b/test/vue3/fixture/completion/interpolation/classComponent/Parent.vue
new file mode 100644
index 0000000000..1782390dd8
--- /dev/null
+++ b/test/vue3/fixture/completion/interpolation/classComponent/Parent.vue
@@ -0,0 +1,17 @@
+<template>
+  <basic-class @></basic-class>
+</template>
+
+<script>
+import Vue from 'vue'
+import BasicClass from './Child.vue'
+import { Options } from 'vue-class-component'
+
+@Options({
+  components: {
+    BasicClass
+  }
+})
+export default class ParentClass extends Vue {
+}
+</script>
diff --git a/test/vue3/fixture/completion/interpolation/propertyDecorator/Child.vue b/test/vue3/fixture/completion/interpolation/propertyDecorator/Child.vue
new file mode 100644
index 0000000000..c4a281f47b
--- /dev/null
+++ b/test/vue3/fixture/completion/interpolation/propertyDecorator/Child.vue
@@ -0,0 +1,32 @@
+<template>
+  <div></div>
+</template>
+
+<script>
+import Vue from 'vue'
+import { Emit, Component } from 'vue-property-decorator'
+
+/**
+ * My basic tag
+ */
+@Component()
+export default class BasicPropertyClass extends Vue {
+  /**
+   * My foo
+   */
+  @Emit('foo')
+  foo() {}
+
+  /**
+   * My fooBar
+   */
+  @Emit()
+  fooBar() {}
+
+  /**
+   * My foo2
+   */
+  @Emit('foo')
+  foo2() {}
+}
+</script>
diff --git a/test/vue3/fixture/completion/interpolation/propertyDecorator/ChildWithEmitsOption.vue b/test/vue3/fixture/completion/interpolation/propertyDecorator/ChildWithEmitsOption.vue
new file mode 100644
index 0000000000..f7a7656884
--- /dev/null
+++ b/test/vue3/fixture/completion/interpolation/propertyDecorator/ChildWithEmitsOption.vue
@@ -0,0 +1,39 @@
+<template>
+  <div></div>
+</template>
+
+<script>
+import Vue from 'vue'
+import { Emit, Component } from 'vue-property-decorator'
+
+/**
+ * My basic tag
+ */
+@Component({
+  emits: {
+    /**
+     * My foo emits
+     */
+    foo: () => true
+  }
+})
+export default class BasicPropertyClass extends Vue {
+  /**
+   * My foo
+   */
+  @Emit('foo')
+  foo() {}
+
+  /**
+   * My fooBar
+   */
+  @Emit()
+  fooBar() {}
+
+  /**
+   * My foo2
+   */
+  @Emit('foo')
+  foo2() {}
+}
+</script>
diff --git a/test/vue3/fixture/completion/interpolation/propertyDecorator/Parent.vue b/test/vue3/fixture/completion/interpolation/propertyDecorator/Parent.vue
new file mode 100644
index 0000000000..d7d25c5747
--- /dev/null
+++ b/test/vue3/fixture/completion/interpolation/propertyDecorator/Parent.vue
@@ -0,0 +1,20 @@
+<template>
+  <basic-property-class @></basic-property-class>
+  <basic-property-class-with-emits @></basic-property-class-with-emits>
+</template>
+
+<script>
+import Vue from 'vue'
+import BasicPropertyClass from './Child.vue'
+import BasicPropertyClassWithEmits from './ChildWithEmitsOption.vue'
+import { Component } from 'vue-property-decorator'
+
+@Component({
+  components: {
+    BasicPropertyClass,
+    BasicPropertyClassWithEmits
+  }
+})
+export default class ParentClass extends Vue {
+}
+</script>
diff --git a/test/vue3/fixture/diagnostics/emitTypeValidation/JSChild.vue b/test/vue3/fixture/diagnostics/emitTypeValidation/JSChild.vue
new file mode 100644
index 0000000000..0f59cce2c9
--- /dev/null
+++ b/test/vue3/fixture/diagnostics/emitTypeValidation/JSChild.vue
@@ -0,0 +1,13 @@
+<script>
+import { PropType, defineComponent, ref, reactive } from "vue";
+
+export default {
+  emits: {
+    null: null,
+    non: () => true,
+    one: a => true,
+    two: (a, b) => true,
+    rest: (a, ...args) => true
+  }
+};
+</script>
diff --git a/test/vue3/fixture/diagnostics/emitTypeValidation/ParentRight.vue b/test/vue3/fixture/diagnostics/emitTypeValidation/ParentRight.vue
new file mode 100644
index 0000000000..20db29039b
--- /dev/null
+++ b/test/vue3/fixture/diagnostics/emitTypeValidation/ParentRight.vue
@@ -0,0 +1,39 @@
+<template>
+  <js-child @null="onNull" @non="onNon" @one="onOne" @two="onTwo" @rest="onRest" />
+  <ts-child @null="onNull" @non="onNon" @one="onOne" @two="onTwo" @rest="onRest" />
+  <property-child @foo="onFoo" @bar="onBar" />
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, reactive, ref } from "vue";
+import JSChild from "./JSChild.vue";
+import TSChild from "./TSChild.vue";
+import PropertyChild from "./PropertyChild.vue"
+
+export default defineComponent({
+  components: {
+    JSChild,
+    TSChild,
+    PropertyChild
+  },
+  setup() {
+    const onNull = (a: any) => {}
+    const onNon = () => {}
+    const onOne = (a: string) => {}
+    const onTwo = (a: boolean, b: string[]) => {}
+    const onRest = (a: string, ...args: number[]) => {}
+    const onFoo = (a: number | boolean) => {}
+    const onBar = (a?: number) => {}
+
+    return {
+      onNull,
+      onNon,
+      onOne,
+      onTwo,
+      onRest,
+      onFoo,
+      onBar
+    };
+  }
+});
+</script>
diff --git a/test/vue3/fixture/diagnostics/emitTypeValidation/ParentWrong.vue b/test/vue3/fixture/diagnostics/emitTypeValidation/ParentWrong.vue
new file mode 100644
index 0000000000..0178234f1c
--- /dev/null
+++ b/test/vue3/fixture/diagnostics/emitTypeValidation/ParentWrong.vue
@@ -0,0 +1,39 @@
+<template>
+  <js-child @null="onNull" @non="onNon" @one="onOne" @two="onTwo" @rest="onRest" />
+  <ts-child @null="onNull" @non="onNon" @one="onOne" @two="onTwo" @rest="onRest" />
+  <property-child @foo="onFoo" @bar="onBar" />
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, reactive, ref } from "vue";
+import JSChild from "./JSChild.vue";
+import TSChild from "./TSChild.vue";
+import PropertyChild from "./PropertyChild.vue"
+
+export default defineComponent({
+  components: {
+    JSChild,
+    TSChild,
+    PropertyChild
+  },
+  setup() {
+    const onNull = (a: never) => {}
+    const onNon = (p: number) => {}
+    const onOne = (a: boolean, b: string) => {}
+    const onTwo = (a: boolean, b: string[], c: number) => {}
+    const onRest = (...args: never[]) => {}
+    const onFoo = (a: number) => {}
+    const onBar = (a: number) => {}
+
+    return {
+      onNull,
+      onNon,
+      onOne,
+      onTwo,
+      onRest,
+      onFoo,
+      onBar
+    };
+  }
+});
+</script>
diff --git a/test/vue3/fixture/diagnostics/emitTypeValidation/PropertyChild.vue b/test/vue3/fixture/diagnostics/emitTypeValidation/PropertyChild.vue
new file mode 100644
index 0000000000..76908cf65a
--- /dev/null
+++ b/test/vue3/fixture/diagnostics/emitTypeValidation/PropertyChild.vue
@@ -0,0 +1,32 @@
+<template>
+  <div></div>
+</template>
+
+<script>
+import Vue from 'vue'
+import { Emit, Component } from 'vue-property-decorator'
+
+/**
+ * My basic tag
+ */
+@Component()
+export default class BasicPropertyClass extends Vue {
+  @Emit('foo')
+  foo() {
+    return true
+  }
+
+  @Emit('foo')
+  foo2() {
+    return 0
+  }
+
+  @Emit('bar')
+  bar() {}
+
+  @Emit('bar')
+  bar2() {
+    return 0
+  }
+}
+</script>
diff --git a/test/vue3/fixture/diagnostics/emitTypeValidation/TSChild.vue b/test/vue3/fixture/diagnostics/emitTypeValidation/TSChild.vue
new file mode 100644
index 0000000000..8131c339d7
--- /dev/null
+++ b/test/vue3/fixture/diagnostics/emitTypeValidation/TSChild.vue
@@ -0,0 +1,13 @@
+<script lang="ts">
+import { PropType, defineComponent, ref, reactive } from "vue";
+
+export default defineComponent({
+  emits: {
+    null: null,
+    non: () => true,
+    one: (a: string) => true,
+    two: (a: boolean, b: string[]) => true,
+    rest: (a: string, ...args: number[]) => true
+  }
+});
+</script>
diff --git a/test/vue3/fixture/package.json b/test/vue3/fixture/package.json
index 011c1f44b0..623bce2c10 100644
--- a/test/vue3/fixture/package.json
+++ b/test/vue3/fixture/package.json
@@ -1,5 +1,6 @@
 {
   "dependencies": {
-    "vue": "^3.0.0-rc.13"
+    "vue": "^3.0.0-rc.13",
+    "vue-class-component": "^8.0.0-rc.1"
   }
 }
diff --git a/test/vue3/fixture/yarn.lock b/test/vue3/fixture/yarn.lock
index 7d1d07ee1b..1703b220ff 100644
--- a/test/vue3/fixture/yarn.lock
+++ b/test/vue3/fixture/yarn.lock
@@ -94,6 +94,11 @@ to-fast-properties@^2.0.0:
   resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
   integrity sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=
 
+vue-class-component@^8.0.0-rc.1:
+  version "8.0.0-rc.1"
+  resolved "https://registry.yarnpkg.com/vue-class-component/-/vue-class-component-8.0.0-rc.1.tgz#db692cd97656eb9a08206c03d0b7398cdb1d9420"
+  integrity sha512-w1nMzsT/UdbDAXKqhwTmSoyuJzUXKrxLE77PCFVuC6syr8acdFDAq116xgvZh9UCuV0h+rlCtxXolr3Hi3HyPQ==
+
 vue@^3.0.0-rc.13:
   version "3.0.0-rc.13"
   resolved "https://registry.yarnpkg.com/vue/-/vue-3.0.0-rc.13.tgz#b3aa1c3e8a5122ce7b5a02e003dbac3d83987eee"