diff --git a/package.json b/package.json
index f058fc3b58..1b1068dfdf 100644
--- a/package.json
+++ b/package.json
@@ -249,7 +249,7 @@
         "vetur.validation.templateProps": {
           "type": "boolean",
           "default": false,
-          "description": "Validate props usage in <template> region. Show error/warning for not passing declared props to child components."
+          "description": "Validate props usage in <template> region. Show error/warning for not passing declared props to child components and show error for passing wrongly typed interpolation expressions"
         },
         "vetur.validation.interpolation": {
           "type": "boolean",
diff --git a/server/src/embeddedSupport/languageModes.ts b/server/src/embeddedSupport/languageModes.ts
index bd17ea67df..965292be96 100644
--- a/server/src/embeddedSupport/languageModes.ts
+++ b/server/src/embeddedSupport/languageModes.ts
@@ -119,7 +119,7 @@ export class LanguageModes {
     }
 
     /**
-     * Documents where everything outside `<script>~ is replaced with whitespace
+     * Documents where everything outside `<script>` is replaced with whitespace
      */
     const scriptRegionDocuments = getLanguageModelCache(10, 60, document => {
       const vueDocument = this.documentRegions.refreshAndGet(document);
diff --git a/server/src/modes/script/componentInfo.ts b/server/src/modes/script/componentInfo.ts
index 76603ae8f9..7c5bdfc15d 100644
--- a/server/src/modes/script/componentInfo.ts
+++ b/server/src/modes/script/componentInfo.ts
@@ -138,16 +138,92 @@ function getProps(tsModule: T_TypeScript, defaultExportType: ts.Type, checker: t
 
   function getPropValidatorInfo(
     propertyValue: ts.Node | undefined
-  ): { hasObjectValidator: boolean; required: boolean } {
-    if (!propertyValue || !tsModule.isObjectLiteralExpression(propertyValue)) {
+  ): { hasObjectValidator: boolean; required: boolean; typeString?: string } {
+    if (!propertyValue) {
       return { hasObjectValidator: false, required: true };
     }
 
+    let typeString: string | undefined = undefined;
+    let typeDeclaration: ts.Identifier | ts.AsExpression | undefined = undefined;
+
+    /**
+     * case `foo: { type: String }`
+     * extract type value: `String`
+     */
+    if (tsModule.isObjectLiteralExpression(propertyValue)) {
+      const propertyValueSymbol = checker.getTypeAtLocation(propertyValue).symbol;
+      const typeValue = propertyValueSymbol?.members?.get('type' as ts.__String)?.valueDeclaration;
+      if (typeValue && tsModule.isPropertyAssignment(typeValue)) {
+        if (tsModule.isIdentifier(typeValue.initializer) || tsModule.isAsExpression(typeValue.initializer)) {
+          typeDeclaration = typeValue.initializer;
+        }
+      }
+    } else {
+      /**
+       * case `foo: String`
+       * extract type value: `String`
+       */
+      if (tsModule.isIdentifier(propertyValue) || tsModule.isAsExpression(propertyValue)) {
+        typeDeclaration = propertyValue;
+      }
+    }
+
+    if (typeDeclaration) {
+      /**
+       * `String` case
+       *
+       * Per https://vuejs.org/v2/guide/components-props.html#Type-Checks, handle:
+       *
+       * String
+       * Number
+       * Boolean
+       * Array
+       * Object
+       * Date
+       * Function
+       * Symbol
+       */
+      if (tsModule.isIdentifier(typeDeclaration)) {
+        const vueTypeCheckConstructorToTSType: Record<string, string> = {
+          String: 'string',
+          Number: 'number',
+          Boolean: 'boolean',
+          Array: 'any[]',
+          Object: 'object',
+          Date: 'Date',
+          Function: 'Function',
+          Symbol: 'Symbol'
+        };
+        const vueTypeString = typeDeclaration.getText();
+        if (vueTypeCheckConstructorToTSType[vueTypeString]) {
+          typeString = vueTypeCheckConstructorToTSType[vueTypeString];
+        }
+      } else if (
+        /**
+         * `String as PropType<'a' | 'b'>` case
+         */
+        tsModule.isAsExpression(typeDeclaration) &&
+        tsModule.isTypeReferenceNode(typeDeclaration.type) &&
+        typeDeclaration.type.typeName.getText() === 'PropType' &&
+        typeDeclaration.type.typeArguments &&
+        typeDeclaration.type.typeArguments[0]
+      ) {
+        const extractedPropType = typeDeclaration.type.typeArguments[0];
+        typeString = extractedPropType.getText();
+      }
+    }
+
+    // console.log(`${(propertyValue.parent as ts.PropertyAssignment).name.getText()}: ${typeString}`)
+
+    if (!propertyValue || !tsModule.isObjectLiteralExpression(propertyValue)) {
+      return { hasObjectValidator: false, required: true, typeString };
+    }
+
     const propertyValueSymbol = checker.getTypeAtLocation(propertyValue).symbol;
     const requiredValue = propertyValueSymbol?.members?.get('required' as ts.__String)?.valueDeclaration;
     const defaultValue = propertyValueSymbol?.members?.get('default' as ts.__String)?.valueDeclaration;
     if (!requiredValue && !defaultValue) {
-      return { hasObjectValidator: false, required: true };
+      return { hasObjectValidator: false, required: true, typeString };
     }
 
     const required = Boolean(
@@ -156,7 +232,7 @@ function getProps(tsModule: T_TypeScript, defaultExportType: ts.Type, checker: t
         requiredValue?.initializer.kind === tsModule.SyntaxKind.TrueKeyword
     );
 
-    return { hasObjectValidator: true, required };
+    return { hasObjectValidator: true, required, typeString };
   }
 
   function getClassProps(type: ts.Type) {
diff --git a/server/src/modes/template/index.ts b/server/src/modes/template/index.ts
index 0722031709..67ed98fb0f 100644
--- a/server/src/modes/template/index.ts
+++ b/server/src/modes/template/index.ts
@@ -35,7 +35,7 @@ export class VueHTMLMode implements LanguageMode {
     const vueDocuments = getLanguageModelCache<HTMLDocument>(10, 60, document => parseHTMLDocument(document));
     const vueVersion = inferVueVersion(tsModule, workspacePath);
     this.htmlMode = new HTMLMode(documentRegions, workspacePath, vueVersion, vueDocuments, vueInfoService);
-    this.vueInterpolationMode = new VueInterpolationMode(tsModule, serviceHost, vueDocuments);
+    this.vueInterpolationMode = new VueInterpolationMode(tsModule, serviceHost, vueDocuments, vueInfoService);
   }
   getId() {
     return 'vue-html';
diff --git a/server/src/modes/template/interpolationMode.ts b/server/src/modes/template/interpolationMode.ts
index dd67e985ea..1bce6779ff 100644
--- a/server/src/modes/template/interpolationMode.ts
+++ b/server/src/modes/template/interpolationMode.ts
@@ -1,34 +1,35 @@
-import { LanguageMode } from '../../embeddedSupport/languageModes';
+import * as _ from 'lodash';
+import * as ts from 'typescript';
 import {
+  CompletionItem,
+  CompletionList,
+  Definition,
   Diagnostic,
-  TextDocument,
   DiagnosticSeverity,
-  Position,
+  Location,
   MarkedString,
+  MarkupContent,
+  Position,
   Range,
-  Location,
-  Definition,
-  CompletionList,
-  TextEdit,
-  CompletionItem,
-  MarkupContent
+  TextDocument,
+  TextEdit
 } from 'vscode-languageserver-types';
-import { IServiceHost } from '../../services/typescriptService/serviceHost';
-import { languageServiceIncludesFile } from '../script/javascript';
-import { getFileFsPath } from '../../utils/paths';
-import { mapBackRange, mapFromPositionToOffset } from '../../services/typescriptService/sourceMap';
 import { URI } from 'vscode-uri';
-import * as ts from 'typescript';
+import { VLSFullConfig } from '../../config';
+import { LanguageModelCache } from '../../embeddedSupport/languageModelCache';
+import { LanguageMode } from '../../embeddedSupport/languageModes';
 import { T_TypeScript } from '../../services/dependencyService';
-import * as _ from 'lodash';
+import { IServiceHost } from '../../services/typescriptService/serviceHost';
+import { mapBackRange, mapFromPositionToOffset } from '../../services/typescriptService/sourceMap';
 import { createTemplateDiagnosticFilter } from '../../services/typescriptService/templateDiagnosticFilter';
-import { NULL_COMPLETION } from '../nullMode';
 import { toCompletionItemKind } from '../../services/typescriptService/util';
-import { LanguageModelCache } from '../../embeddedSupport/languageModelCache';
+import { VueInfoService } from '../../services/vueInfoService';
+import { getFileFsPath } from '../../utils/paths';
+import { NULL_COMPLETION } from '../nullMode';
+import { languageServiceIncludesFile } from '../script/javascript';
+import * as Previewer from '../script/previewer';
 import { HTMLDocument } from './parser/htmlParser';
 import { isInsideInterpolation } from './services/isInsideInterpolation';
-import * as Previewer from '../script/previewer';
-import { VLSFullConfig } from '../../config';
 
 export class VueInterpolationMode implements LanguageMode {
   private config: VLSFullConfig;
@@ -36,7 +37,8 @@ export class VueInterpolationMode implements LanguageMode {
   constructor(
     private tsModule: T_TypeScript,
     private serviceHost: IServiceHost,
-    private vueDocuments: LanguageModelCache<HTMLDocument>
+    private vueDocuments: LanguageModelCache<HTMLDocument>,
+    private vueInfoService?: VueInfoService
   ) {}
 
   getId() {
@@ -67,7 +69,15 @@ export class VueInterpolationMode implements LanguageMode {
       document.getText()
     );
 
-    const { templateService, templateSourceMap } = this.serviceHost.updateCurrentVirtualVueTextDocument(templateDoc);
+    const childComponents = this.config.vetur.validation.templateProps
+      ? this.vueInfoService && this.vueInfoService.getInfo(document)?.componentInfo.childComponents
+      : [];
+
+    const { templateService, templateSourceMap } = this.serviceHost.updateCurrentVirtualVueTextDocument(
+      templateDoc,
+      childComponents
+    );
+
     if (!languageServiceIncludesFile(templateService, templateDoc.uri)) {
       return [];
     }
@@ -135,16 +145,27 @@ export class VueInterpolationMode implements LanguageMode {
     const mappedOffset = mapFromPositionToOffset(templateDoc, completionPos, templateSourceMap);
     const templateFileFsPath = getFileFsPath(templateDoc.uri);
 
-    const completions = templateService.getCompletionsAtPosition(templateFileFsPath, mappedOffset, {
-      includeCompletionsWithInsertText: true,
-      includeCompletionsForModuleExports: false
-    });
+    /**
+     * A lot of times interpolation expressions aren't valid
+     * TODO: Make sure interpolation expression, even incomplete, can generate incomplete
+     * TS files that can be fed into language service
+     */
+    let completions: ts.WithMetadata<ts.CompletionInfo> | undefined;
+    try {
+      completions = templateService.getCompletionsAtPosition(templateFileFsPath, mappedOffset, {
+        includeCompletionsWithInsertText: true,
+        includeCompletionsForModuleExports: false
+      });
+    } catch (err) {
+      console.log('Interpolation completion failed');
+      console.error(err.toString());
+    }
 
     if (!completions) {
       return NULL_COMPLETION;
     }
 
-    const tsItems = completions.entries.map((entry, index) => {
+    const tsItems = completions!.entries.map((entry, index) => {
       return {
         uri: templateDoc.uri,
         position,
diff --git a/server/src/modes/template/services/vueInterpolationCompletion.ts b/server/src/modes/template/services/vueInterpolationCompletion.ts
deleted file mode 100644
index 3d64f0a364..0000000000
--- a/server/src/modes/template/services/vueInterpolationCompletion.ts
+++ /dev/null
@@ -1,105 +0,0 @@
-import * as ts from 'typescript';
-import { CompletionItemKind, CompletionItem } from 'vscode-languageserver';
-import { VueFileInfo } from '../../../services/vueInfoService';
-import { findNodeByOffset } from '../../../services/typescriptService/util';
-import { T_TypeScript } from '../../../services/dependencyService';
-
-export function getVueInterpolationCompletionMap(
-  tsModule: T_TypeScript,
-  fileName: string,
-  offset: number,
-  templateService: ts.LanguageService,
-  vueFileInfo: VueFileInfo
-): Map<string, CompletionItem> | undefined {
-  const result = new Map<string, CompletionItem>();
-
-  if (!isComponentCompletion(tsModule, fileName, offset, templateService)) {
-    return;
-  }
-
-  if (vueFileInfo.componentInfo.props) {
-    vueFileInfo.componentInfo.props.forEach(p => {
-      result.set(p.name, {
-        label: p.name,
-        documentation: {
-          kind: 'markdown',
-          value: p.documentation || `\`${p.name}\` prop`
-        },
-        kind: CompletionItemKind.Property
-      });
-    });
-  }
-
-  if (vueFileInfo.componentInfo.data) {
-    vueFileInfo.componentInfo.data.forEach(p => {
-      result.set(p.name, {
-        label: p.name,
-        documentation: {
-          kind: 'markdown',
-          value: p.documentation || `\`${p.name}\` data`
-        },
-        kind: CompletionItemKind.Property
-      });
-    });
-  }
-
-  if (vueFileInfo.componentInfo.computed) {
-    vueFileInfo.componentInfo.computed.forEach(p => {
-      result.set(p.name, {
-        label: p.name,
-        documentation: {
-          kind: 'markdown',
-          value: p.documentation || `\`${p.name}\` computed`
-        },
-        kind: CompletionItemKind.Property
-      });
-    });
-  }
-
-  if (vueFileInfo.componentInfo.methods) {
-    vueFileInfo.componentInfo.methods.forEach(p => {
-      result.set(p.name, {
-        label: p.name,
-        documentation: {
-          kind: 'markdown',
-          value: p.documentation || `\`${p.name}\` method`
-        },
-        kind: CompletionItemKind.Method
-      });
-    });
-  }
-
-  return result;
-}
-
-function isComponentCompletion(
-  tsModule: T_TypeScript,
-  fileName: string,
-  offset: number,
-  templateService: ts.LanguageService
-): boolean {
-  const program = templateService.getProgram();
-  if (!program) {
-    return false;
-  }
-
-  const source = program.getSourceFile(fileName);
-  if (!source) {
-    return false;
-  }
-
-  const completionTarget = findNodeByOffset(source, offset);
-  if (!completionTarget) {
-    return false;
-  }
-
-  return (
-    // Completion for direct component properties.
-    // e.g. {{ valu| }}
-    (tsModule.isPropertyAccessExpression(completionTarget.parent) &&
-      completionTarget.parent.expression.kind === tsModule.SyntaxKind.ThisKeyword) ||
-    // Completion for implicit component properties (e.g. triggering completion without any text).
-    // e.g. {{ | }}
-    !tsModule.isPropertyAccessExpression(completionTarget.parent)
-  );
-}
diff --git a/server/src/services/typescriptService/bridge.ts b/server/src/services/typescriptService/bridge.ts
index a017733cd8..4ad8202317 100644
--- a/server/src/services/typescriptService/bridge.ts
+++ b/server/src/services/typescriptService/bridge.ts
@@ -1,4 +1,4 @@
-import { renderHelperName, componentHelperName, iterationHelperName } from './transformTemplate';
+import { renderHelperName, componentHelperName, iterationHelperName, componentDataName } from './transformTemplate';
 
 // This bridge file will be injected into TypeScript language service
 // it enable type checking and completion, yet still preserve precise option type
@@ -11,7 +11,7 @@ const renderHelpers = `
 type ComponentListeners<T> = {
   [K in keyof T]?: ($event: T[K]) => any;
 };
-interface ComponentData<T> {
+export interface ${componentDataName}<T> {
   props: Record<string, any>;
   on: ComponentListeners<T>;
   directives: any[];
@@ -23,7 +23,7 @@ export declare const ${componentHelperName}: {
   <T>(
     vm: T,
     tag: string,
-    data: ComponentData<Record<string, any>> & ThisType<T>,
+    data: ${componentDataName}<Record<string, any>> & ThisType<T>,
     children: any[]
   ): any;
 };
diff --git a/server/src/services/typescriptService/documentRegistry.ts b/server/src/services/typescriptService/documentRegistry.ts
deleted file mode 100644
index 6b378efb7f..0000000000
--- a/server/src/services/typescriptService/documentRegistry.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-// import * as ts from 'typescript';
-// import { T_TypeScript } from '../dependencyService';
-
-// export function getVueDocumentRegistry(tsModule: T_TypeScript): ts.DocumentRegistry {
-//   const _baseRegistry = tsModule.createDocumentRegistry();
-
-//   return {
-//     ..._baseRegistry,
-//     acquireDocument: _baseRegistry.acquireDocument
-//   }
-// }
-
-// export class VueDocumentRegistry implements ts.DocumentRegistry {
-//   private baseRegistry: ts.DocumentRegistry;
-
-//   constructor(tsModule: T_TypeScript) {
-//     this.baseRegistry = tsModule.createDocumentRegistry();
-
-//     this.acquireDocument = this.baseRegistry.acquireDocument;
-//   }
-
-//   // acquireDocument(
-//   //   fileName: string,
-//   //   compilationSettings: ts.CompilerOptions,
-//   //   scriptSnapshot: ts.IScriptSnapshot,
-//   //   version: string,
-//   //   scriptKind?: ts.ScriptKind
-//   // ): ts.SourceFile {
-//   //   return this.baseRegistry.acquireDocument(fileName, compilationSettings, scriptSnapshot, version, scriptKind);
-//   // }
-// }
diff --git a/server/src/services/typescriptService/index.ts b/server/src/services/typescriptService/index.ts
deleted file mode 100644
index f531723e5a..0000000000
--- a/server/src/services/typescriptService/index.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { DependencyService, T_TypeScript, State } from '../dependencyService';
-import { LanguageServiceHost } from 'typescript';
-
-export class TypescriptService {
-  private tsModule: T_TypeScript;
-  private tsLanguageServiceHost: LanguageServiceHost;
-
-  constructor(dependencyService: DependencyService) {
-    const tsDependency = dependencyService.getDependency('typescript');
-    if (tsDependency && tsDependency.state === State.Loaded) {
-      this.tsModule = tsDependency.module;
-    } else {
-      throw Error('Failed to load TypeScript module');
-    }
-  }
-}
diff --git a/server/src/services/typescriptService/preprocess.ts b/server/src/services/typescriptService/preprocess.ts
index dbc5f62ae2..1ba3ff8b42 100644
--- a/server/src/services/typescriptService/preprocess.ts
+++ b/server/src/services/typescriptService/preprocess.ts
@@ -10,11 +10,14 @@ import {
   getTemplateTransformFunctions,
   componentHelperName,
   iterationHelperName,
-  renderHelperName
+  renderHelperName,
+  componentDataName
 } from './transformTemplate';
 import { templateSourceMap } from './serviceHost';
 import { generateSourceMap } from './sourceMap';
 import { isVirtualVueTemplateFile, isVueFile } from './util';
+import { ChildComponent } from '../vueInfoService';
+import { snakeCase } from 'lodash';
 
 const importedComponentName = '__vlsComponent';
 
@@ -47,7 +50,7 @@ export function parseVueTemplate(text: string): string {
   return rawText.replace(/ {10}/, '<template>') + '</template>';
 }
 
-export function createUpdater(tsModule: T_TypeScript) {
+export function createUpdater(tsModule: T_TypeScript, allChildComponentsInfo: Map<string, ChildComponent[]>) {
   const clssf = tsModule.createLanguageServiceSourceFile;
   const ulssf = tsModule.updateLanguageServiceSourceFile;
   const scriptKindTracker = new WeakMap<ts.SourceFile, ts.ScriptKind | undefined>();
@@ -80,7 +83,7 @@ export function createUpdater(tsModule: T_TypeScript) {
    * The transformed TS AST has synthetic nodes so language features would fail on them
    * Use printer to print the AST as re-parse the source to get a valid SourceFile
    */
-  function recreateVueTempalteSourceFile(
+  function recreateVueTemplateSourceFile(
     vueTemplateFileName: string,
     sourceFile: ts.SourceFile,
     scriptSnapshot: ts.IScriptSnapshot
@@ -92,16 +95,25 @@ export function createUpdater(tsModule: T_TypeScript) {
     const scriptSrc = parseVueScriptSrc(vueText);
     const program = parse(templateCode, { sourceType: 'module' });
 
+    const childComponentNames = allChildComponentsInfo.get(vueTemplateFileName)?.map(c => snakeCase(c.name));
     let expressions: ts.Expression[] = [];
     try {
-      expressions = getTemplateTransformFunctions(tsModule).transformTemplate(program, templateCode);
+      expressions = getTemplateTransformFunctions(tsModule, childComponentNames).transformTemplate(
+        program,
+        templateCode
+      );
       injectVueTemplate(tsModule, sourceFile, expressions, scriptSrc);
     } catch (err) {
       console.log(`Failed to transform template of ${vueTemplateFileName}`);
       console.log(err);
     }
 
-    const newText = printer.printFile(sourceFile);
+    let newText = printer.printFile(sourceFile);
+
+    if (allChildComponentsInfo.has(vueTemplateFileName)) {
+      const childComponents = allChildComponentsInfo.get(vueTemplateFileName)!;
+      newText += convertChildComponentsInfoToSource(childComponents);
+    }
 
     const newSourceFile = tsModule.createSourceFile(
       vueTemplateFileName,
@@ -130,7 +142,7 @@ export function createUpdater(tsModule: T_TypeScript) {
     let sourceFile = clssf(fileName, scriptSnapshot, scriptTarget, version, setNodeParents, scriptKind);
     scriptKindTracker.set(sourceFile, scriptKind);
     if (isVirtualVueTemplateFile(fileName)) {
-      sourceFile = recreateVueTempalteSourceFile(fileName, sourceFile, scriptSnapshot);
+      sourceFile = recreateVueTemplateSourceFile(fileName, sourceFile, scriptSnapshot);
       modificationTracker.add(sourceFile);
     } else {
       modifySourceFile(fileName, sourceFile, scriptSnapshot, version, scriptKind);
@@ -148,7 +160,7 @@ export function createUpdater(tsModule: T_TypeScript) {
     const scriptKind = scriptKindTracker.get(sourceFile);
     sourceFile = ulssf(sourceFile, scriptSnapshot, version, textChangeRange, aggressiveChecks);
     if (isVirtualVueTemplateFile(sourceFile.fileName)) {
-      sourceFile = recreateVueTempalteSourceFile(sourceFile.fileName, sourceFile, scriptSnapshot);
+      sourceFile = recreateVueTemplateSourceFile(sourceFile.fileName, sourceFile, scriptSnapshot);
       modificationTracker.add(sourceFile);
     } else {
       modifySourceFile(sourceFile.fileName, sourceFile, scriptSnapshot, version, scriptKind);
@@ -235,7 +247,8 @@ export function injectVueTemplate(
       tsModule.createNamedImports([
         tsModule.createImportSpecifier(undefined, tsModule.createIdentifier(renderHelperName)),
         tsModule.createImportSpecifier(undefined, tsModule.createIdentifier(componentHelperName)),
-        tsModule.createImportSpecifier(undefined, tsModule.createIdentifier(iterationHelperName))
+        tsModule.createImportSpecifier(undefined, tsModule.createIdentifier(iterationHelperName)),
+        tsModule.createImportSpecifier(undefined, tsModule.createIdentifier(componentDataName))
       ])
     ),
     tsModule.createLiteral('vue-editor-bridge')
@@ -277,3 +290,32 @@ function getWrapperRangeSetter(
 ): <T extends ts.TextRange>(wrapperNode: T) => T {
   return wrapperNode => tsModule.setTextRange(wrapperNode, wrapped);
 }
+
+function convertChildComponentsInfoToSource(childComponents: ChildComponent[]) {
+  let src = '';
+  childComponents.forEach(c => {
+    const componentDataInterfaceName = componentDataName + '__' + snakeCase(c.name);
+    const componentHelperInterfaceName = componentHelperName + '__' + snakeCase(c.name);
+
+    const propTypeStrings: string[] = [];
+    c.info?.componentInfo.props?.forEach(p => {
+      propTypeStrings.push(`${p.name}: ${p.typeString}`);
+    });
+    propTypeStrings.push('[other: string]: any');
+
+    src += `
+interface ${componentDataInterfaceName}<T> extends ${componentDataName}<T> {
+  props: { ${propTypeStrings.join(', ')} }
+}
+declare const ${componentHelperInterfaceName}: {
+  <T>(
+    vm: T,
+    tag: string,
+    data: ${componentDataInterfaceName}<Record<string, any>> & ThisType<T>,
+    children: any[]
+  ): any
+}`;
+  });
+
+  return src;
+}
diff --git a/server/src/services/typescriptService/serviceHost.ts b/server/src/services/typescriptService/serviceHost.ts
index 1b76a68527..c4a08c0b5e 100644
--- a/server/src/services/typescriptService/serviceHost.ts
+++ b/server/src/services/typescriptService/serviceHost.ts
@@ -16,13 +16,22 @@ import { logger } from '../../log';
 import { ModuleResolutionCache } from './moduleResolutionCache';
 import { globalScope } from './transformTemplate';
 import { inferVueVersion, VueVersion } from './vueVersion';
+import { ChildComponent } from '../vueInfoService';
 
 const NEWLINE = process.platform === 'win32' ? '\r\n' : '\n';
 
+/**
+ * For prop validation
+ */
+const allChildComponentsInfo = new Map<string, ChildComponent[]>();
+
 function patchTS(tsModule: T_TypeScript) {
   // Patch typescript functions to insert `import Vue from 'vue'` and `new Vue` around export default.
   // NOTE: this is a global hack that all ts instances after is changed
-  const { createLanguageServiceSourceFile, updateLanguageServiceSourceFile } = createUpdater(tsModule);
+  const { createLanguageServiceSourceFile, updateLanguageServiceSourceFile } = createUpdater(
+    tsModule,
+    allChildComponentsInfo
+  );
   (tsModule as any).createLanguageServiceSourceFile = createLanguageServiceSourceFile;
   (tsModule as any).updateLanguageServiceSourceFile = updateLanguageServiceSourceFile;
 }
@@ -48,7 +57,8 @@ export const templateSourceMap: TemplateSourceMap = {};
 export interface IServiceHost {
   queryVirtualFileInfo(fileName: string, currFileText: string): { source: string; sourceMapNodesString: string };
   updateCurrentVirtualVueTextDocument(
-    doc: TextDocument
+    doc: TextDocument,
+    childComponents?: ChildComponent[]
   ): {
     templateService: ts.LanguageService;
     templateSourceMap: TemplateSourceMap;
@@ -130,7 +140,7 @@ export function getServiceHost(
     };
   }
 
-  function updateCurrentVirtualVueTextDocument(doc: TextDocument) {
+  function updateCurrentVirtualVueTextDocument(doc: TextDocument, childComponents?: ChildComponent[]) {
     const fileFsPath = getFileFsPath(doc.uri);
     const filePath = getFilePath(doc.uri);
     // When file is not in language service, add it
@@ -143,6 +153,9 @@ export function getServiceHost(
     if (isVirtualVueTemplateFile(fileFsPath)) {
       localScriptRegionDocuments.set(fileFsPath, doc);
       scriptFileNameSet.add(filePath);
+      if (childComponents) {
+        allChildComponentsInfo.set(filePath, childComponents);
+      }
       versions.set(fileFsPath, (versions.get(fileFsPath) || 0) + 1);
     }
 
diff --git a/server/src/services/typescriptService/sourceMap.ts b/server/src/services/typescriptService/sourceMap.ts
index 27e15cde64..337865062a 100644
--- a/server/src/services/typescriptService/sourceMap.ts
+++ b/server/src/services/typescriptService/sourceMap.ts
@@ -84,12 +84,11 @@ export function generateSourceMap(
       return false;
     });
 
-    if (validNodeChildren.length !== syntheticNodeChildren.length) {
-      return;
-    }
-
     validNodeChildren.forEach((vc, i) => {
       const sc = syntheticNodeChildren[i];
+      if (!sc) {
+        return;
+      }
 
       const scSourceRange = tsModule.getSourceMapRange(sc);
 
@@ -271,6 +270,16 @@ function updateOffsetMapping(node: TemplateSourceMapNode, isThisInjected: boolea
      * Without this back mapping, mapping error from `this.bar` in `f(this.bar)` would fail
      */
     node.offsetBackMapping[nodeToStart] = nodeFromStart + 'this.'.length;
+  } else if (to.length > from.length) {
+    /**
+     * The case when `to` is wider than `from`
+     * For example, in `:foo="num"` to `{ "foo": this.num }`,
+     * need to map `"foo"` back to `foo`
+     */
+    const delta = to.length - from.length;
+    for (let i = 0; i < delta; i++) {
+      node.offsetBackMapping[node.to.start + from.length + i] = node.from.end;
+    }
   }
   const toFiltered = to as number[];
   if (isThisInjected) {
diff --git a/server/src/services/typescriptService/transformTemplate.ts b/server/src/services/typescriptService/transformTemplate.ts
index c5abe5ed20..47b35dfeca 100644
--- a/server/src/services/typescriptService/transformTemplate.ts
+++ b/server/src/services/typescriptService/transformTemplate.ts
@@ -1,3 +1,4 @@
+import { snakeCase } from 'lodash';
 import * as ts from 'typescript';
 import { AST } from 'vue-eslint-parser';
 import { T_TypeScript } from '../dependencyService';
@@ -6,6 +7,7 @@ import { walkExpression } from './walkExpression';
 export const renderHelperName = '__vlsRenderHelper';
 export const componentHelperName = '__vlsComponentHelper';
 export const iterationHelperName = '__vlsIterationHelper';
+export const componentDataName = '__vlsComponentData';
 
 /**
  * Allowed global variables in templates.
@@ -22,7 +24,13 @@ const vOnScope = ['$event', 'arguments'];
 
 type ESLintVChild = AST.VElement | AST.VExpressionContainer | AST.VText;
 
-export function getTemplateTransformFunctions(ts: T_TypeScript) {
+/**
+ * @param ts Loaded TS dependency
+ * @param childComponentNamesInSnakeCase If `VElement`'s name matches one of the child components'
+ * name, generate expression with `${componentHelperName}__${name}`, which will enforce type-check
+ * on props
+ */
+export function getTemplateTransformFunctions(ts: T_TypeScript, childComponentNamesInSnakeCase?: string[]) {
   return {
     transformTemplate,
     parseExpression
@@ -54,7 +62,12 @@ export function getTemplateTransformFunctions(ts: T_TypeScript) {
    * __vlsComponentHelper('div', { props: { title: this.foo } }, [ ...children... ]);
    */
   function transformElement(node: AST.VElement, code: string, scope: string[]): ts.Expression {
-    return ts.createCall(ts.createIdentifier(componentHelperName), undefined, [
+    const identifier =
+      childComponentNamesInSnakeCase && childComponentNamesInSnakeCase.indexOf(snakeCase(node.rawName)) !== -1
+        ? ts.createIdentifier(componentHelperName + '__' + snakeCase(node.rawName))
+        : ts.createIdentifier(componentHelperName);
+
+    return ts.createCall(identifier, undefined, [
       // Pass this value to propagate ThisType in listener handlers
       ts.createIdentifier('this'),
 
@@ -219,7 +232,11 @@ export function getTemplateTransformFunctions(ts: T_TypeScript) {
       if (name.type === 'VIdentifier') {
         // Attribute name is specified
         // e.g. v-bind:value="foo"
-        return ts.createPropertyAssignment(ts.createStringLiteral(name.name), dirExp);
+        const propNameNode = ts.setSourceMapRange(ts.createStringLiteral(name.name), {
+          pos: name.range[0],
+          end: name.range[1]
+        });
+        return ts.createPropertyAssignment(propNameNode, dirExp);
       } else {
         // Attribute name is dynamic
         // e.g. v-bind:[value]="foo"
diff --git a/server/src/services/vls.ts b/server/src/services/vls.ts
index e66fceb715..67efcb2c5b 100644
--- a/server/src/services/vls.ts
+++ b/server/src/services/vls.ts
@@ -56,7 +56,6 @@ import { logger } from '../log';
 import { getDefaultVLSConfig, VLSFullConfig, VLSConfig } from '../config';
 import { LanguageId } from '../embeddedSupport/embeddedSupport';
 import { APPLY_REFACTOR_COMMAND } from '../modes/script/javascript';
-import { EndOfLine } from 'vscode';
 
 export class VLS {
   // @Todo: Remove this and DocumentContext
diff --git a/server/src/services/vueInfoService.ts b/server/src/services/vueInfoService.ts
index 40a912075b..aae61b58f9 100644
--- a/server/src/services/vueInfoService.ts
+++ b/server/src/services/vueInfoService.ts
@@ -60,6 +60,7 @@ export interface PropInfo {
   required: boolean;
   isBoundToModel: boolean;
   documentation?: string;
+  typeString?: string;
 }
 export interface DataInfo {
   name: string;
diff --git a/test/componentData/index.ts b/test/componentData/index.ts
index 83ecd8f302..4a638a8284 100644
--- a/test/componentData/index.ts
+++ b/test/componentData/index.ts
@@ -11,7 +11,6 @@ export function run(): Promise<void> {
       args[k.slice('MOCHA_'.length)] = process.env[k];
     });
 
-  // Create the mocha test
   const mocha = new Mocha({
     ui: 'bdd',
     timeout: 100000,
diff --git a/test/diagnosticHelper.ts b/test/diagnosticHelper.ts
index 70d7966567..ddd49b354d 100644
--- a/test/diagnosticHelper.ts
+++ b/test/diagnosticHelper.ts
@@ -15,7 +15,7 @@ export async function testDiagnostics(docUri: vscode.Uri, expectedDiagnostics: v
       result.some(d => {
         return isEqualDiagnostic(ed, d);
       }),
-      `Cannot find matching diagnostics for\n${ed.message}\n${JSON.stringify(ed)}\n` +
+      `Cannot find matching diagnostics for\n${ed.message}\n\n${JSON.stringify(ed, null, 2)}\n\n` +
         `Seen diagnostics are:\n${JSON.stringify(result, null, 2)}`
     );
   });
diff --git a/test/grammar/index.ts b/test/grammar/index.ts
index 83ecd8f302..4a638a8284 100644
--- a/test/grammar/index.ts
+++ b/test/grammar/index.ts
@@ -11,7 +11,6 @@ export function run(): Promise<void> {
       args[k.slice('MOCHA_'.length)] = process.env[k];
     });
 
-  // Create the mocha test
   const mocha = new Mocha({
     ui: 'bdd',
     timeout: 100000,
diff --git a/test/interpolation/features/diagnostics/propTypeValidation.test.ts b/test/interpolation/features/diagnostics/propTypeValidation.test.ts
new file mode 100644
index 0000000000..5dff2df5de
--- /dev/null
+++ b/test/interpolation/features/diagnostics/propTypeValidation.test.ts
@@ -0,0 +1,68 @@
+import { getDocUri } from '../../path';
+import { testDiagnostics, testNoDiagnostics } from '../../../diagnosticHelper';
+import { sameLineRange } from '../../../util';
+import { DiagnosticSeverity } from 'vscode';
+
+describe('Should find prop type valiation errors', () => {
+  const rightUri = getDocUri('diagnostics/propTypeValidation/ParentRight.vue');
+  const wrongUri = getDocUri('diagnostics/propTypeValidation/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 'number' is not assignable to type 'string'.",
+        range: sameLineRange(2, 15, 18),
+        source: 'Vetur',
+        code: 2322
+      },
+      {
+        severity: DiagnosticSeverity.Error,
+        message: "Type 'number' is not assignable to type 'boolean'.",
+        range: sameLineRange(2, 28, 32),
+        source: 'Vetur',
+        code: 2322
+      },
+      {
+        severity: DiagnosticSeverity.Error,
+        message: "Type 'number' is not assignable to type 'Function'.",
+        range: sameLineRange(2, 42, 50),
+        source: 'Vetur',
+        code: 2322
+      },
+      {
+        severity: DiagnosticSeverity.Error,
+        message: "Type 'number' is not assignable to type 'string'.",
+        range: sameLineRange(3, 15, 18),
+        source: 'Vetur',
+        code: 2322
+      },
+      {
+        severity: DiagnosticSeverity.Error,
+        message: "Type 'number' is not assignable to type 'boolean'.",
+        range: sameLineRange(3, 28, 32),
+        source: 'Vetur',
+        code: 2322
+      },
+      {
+        severity: DiagnosticSeverity.Error,
+        message: "Type 'number' is not assignable to type '() => void'.",
+        range: sameLineRange(3, 42, 50),
+        source: 'Vetur',
+        code: 2322
+      },
+      {
+        severity: DiagnosticSeverity.Error,
+        message:
+          "Type 'number[]' is not assignable to type 'string[]'.\n  Type 'number' is not assignable to type 'string'.",
+        range: sameLineRange(3, 60, 63),
+        source: 'Vetur',
+        code: 2322
+      }
+    ]);
+  });
+});
diff --git a/test/interpolation/fixture/diagnostics/propTypeValidation/JSChild.vue b/test/interpolation/fixture/diagnostics/propTypeValidation/JSChild.vue
new file mode 100644
index 0000000000..b5433279d4
--- /dev/null
+++ b/test/interpolation/fixture/diagnostics/propTypeValidation/JSChild.vue
@@ -0,0 +1,16 @@
+<template>
+  <div></div>
+</template>
+
+<script>
+export default {
+  props: {
+    str: String,
+    bool: Boolean,
+    callback: {
+      type: Function
+    },
+    arr: Array
+  }
+};
+</script>
diff --git a/test/interpolation/fixture/diagnostics/propTypeValidation/ParentRight.vue b/test/interpolation/fixture/diagnostics/propTypeValidation/ParentRight.vue
new file mode 100644
index 0000000000..b292684337
--- /dev/null
+++ b/test/interpolation/fixture/diagnostics/propTypeValidation/ParentRight.vue
@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <js-child :str="`count: ${count}`" :bool="isZeroCount" :callback="increment" />
+    <ts-child :str="`count: ${count}`" :bool="isZeroCount" :callback="increment" />
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import JSChild from "./JSChild.vue";
+import TSChild from "./TSChild.vue";
+
+export default Vue.extend({
+  components: {
+    JSChild,
+    TSChild
+  },
+  data() {
+    return {
+      count: 0
+    }
+  },
+  computed: {
+    isZeroCount(): boolean {
+      return this.count === 0
+    }
+  },
+  methods: {
+    increment() {
+      this.count++
+    }
+  }
+});
+</script>
\ No newline at end of file
diff --git a/test/interpolation/fixture/diagnostics/propTypeValidation/ParentWrong.vue b/test/interpolation/fixture/diagnostics/propTypeValidation/ParentWrong.vue
new file mode 100644
index 0000000000..a01f380a88
--- /dev/null
+++ b/test/interpolation/fixture/diagnostics/propTypeValidation/ParentWrong.vue
@@ -0,0 +1,37 @@
+<template>
+  <div>
+    <js-child :str="count" :bool="count" :callback="count" :arr="[0, 1]" />
+    <ts-child :str="count" :bool="count" :callback="count" :arr="zeroToCount" />
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import JSChild from "./JSChild.vue";
+import TSChild from "./TSChild.vue";
+
+export default Vue.extend({
+  components: {
+    JSChild,
+    TSChild
+  },
+  data() {
+    return {
+      count: 0
+    }
+  },
+  computed: {
+    isZeroCount(): boolean {
+      return this.count === 0
+    },
+    zeroToCount(): number[] {
+      return [...Array(this.count).keys()]
+    }
+  },
+  methods: {
+    increment() {
+      this.count++
+    }
+  }
+});
+</script>
\ No newline at end of file
diff --git a/test/interpolation/fixture/diagnostics/propTypeValidation/TSChild.vue b/test/interpolation/fixture/diagnostics/propTypeValidation/TSChild.vue
new file mode 100644
index 0000000000..01bb570b61
--- /dev/null
+++ b/test/interpolation/fixture/diagnostics/propTypeValidation/TSChild.vue
@@ -0,0 +1,18 @@
+<template>
+  <div></div>
+</template>
+
+<script lang="ts">
+import Vue, { PropType } from 'vue'
+
+export default Vue.extend({
+  props: {
+    str: String,
+    bool: Boolean,
+    callback: {
+      type: Function as PropType<() => void>
+    },
+    arr: Array as PropType<string[]>
+  }
+});
+</script>
diff --git a/test/interpolation/index.ts b/test/interpolation/index.ts
index ca3277e5cd..4a638a8284 100644
--- a/test/interpolation/index.ts
+++ b/test/interpolation/index.ts
@@ -11,12 +11,10 @@ export function run(): Promise<void> {
       args[k.slice('MOCHA_'.length)] = process.env[k];
     });
 
-  // Create the mocha test
   const mocha = new Mocha({
     ui: 'bdd',
     timeout: 100000,
     color: true,
-
     ...args
   });
 
diff --git a/test/lsp/index.ts b/test/lsp/index.ts
index 83ecd8f302..4a638a8284 100644
--- a/test/lsp/index.ts
+++ b/test/lsp/index.ts
@@ -11,7 +11,6 @@ export function run(): Promise<void> {
       args[k.slice('MOCHA_'.length)] = process.env[k];
     });
 
-  // Create the mocha test
   const mocha = new Mocha({
     ui: 'bdd',
     timeout: 100000,
diff --git a/test/vue3/features/diagnostics/propTypeValidation.test.ts b/test/vue3/features/diagnostics/propTypeValidation.test.ts
new file mode 100644
index 0000000000..2948224553
--- /dev/null
+++ b/test/vue3/features/diagnostics/propTypeValidation.test.ts
@@ -0,0 +1,69 @@
+import { getDocUri } from '../../path';
+import { testDiagnostics, testNoDiagnostics } from '../../../diagnosticHelper';
+import { sameLineRange } from '../../../util';
+import { DiagnosticSeverity } from 'vscode';
+
+describe('Should find prop type valiation errors', () => {
+  const rightUri = getDocUri('diagnostics/propTypeValidation/ParentRight.vue');
+  const wrongUri = getDocUri('diagnostics/propTypeValidation/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 'number' is not assignable to type 'string'.",
+        range: sameLineRange(1, 13, 16),
+        source: 'Vetur'
+      },
+      {
+        severity: DiagnosticSeverity.Error,
+        message:
+          "Type '{ count: number; isZeroCount: boolean; zeroToCount: number[]; }' is not assignable to type 'boolean'.",
+        range: sameLineRange(1, 32, 36),
+        source: 'Vetur',
+        code: 2322
+      },
+      {
+        severity: DiagnosticSeverity.Error,
+        message: "Type 'boolean' is not assignable to type 'Function'.",
+        range: sameLineRange(1, 46, 54),
+        source: 'Vetur',
+        code: 2322
+      },
+      {
+        severity: DiagnosticSeverity.Error,
+        message: "Type 'number' is not assignable to type 'string'.",
+        range: sameLineRange(2, 13, 16),
+        source: 'Vetur',
+        code: 2322
+      },
+      {
+        severity: DiagnosticSeverity.Error,
+        message:
+          "Type '{ count: number; isZeroCount: boolean; zeroToCount: number[]; }' is not assignable to type 'boolean'.",
+        range: sameLineRange(2, 32, 36),
+        source: 'Vetur',
+        code: 2322
+      },
+      {
+        severity: DiagnosticSeverity.Error,
+        message: "Type 'boolean' is not assignable to type '() => void'.",
+        range: sameLineRange(2, 46, 54),
+        source: 'Vetur',
+        code: 2322
+      },
+      {
+        severity: DiagnosticSeverity.Error,
+        message:
+          "Type 'number[]' is not assignable to type 'string[]'.\n  Type 'number' is not assignable to type 'string'.",
+        range: sameLineRange(2, 76, 79),
+        source: 'Vetur',
+        code: 2322
+      }
+    ]);
+  });
+});
diff --git a/test/vue3/fixture/diagnostics/propTypeValidation/JSChild.vue b/test/vue3/fixture/diagnostics/propTypeValidation/JSChild.vue
new file mode 100644
index 0000000000..4e15fb9f61
--- /dev/null
+++ b/test/vue3/fixture/diagnostics/propTypeValidation/JSChild.vue
@@ -0,0 +1,18 @@
+<template>
+  <div></div>
+</template>
+
+<script>
+import { PropType, defineComponent, ref, reactive } from "vue";
+
+export default {
+  props: {
+    str: String,
+    bool: Boolean,
+    callback: {
+      type: Function
+    },
+    arr: Array
+  }
+};
+</script>
diff --git a/test/vue3/fixture/diagnostics/propTypeValidation/ParentRight.vue b/test/vue3/fixture/diagnostics/propTypeValidation/ParentRight.vue
new file mode 100644
index 0000000000..0363767150
--- /dev/null
+++ b/test/vue3/fixture/diagnostics/propTypeValidation/ParentRight.vue
@@ -0,0 +1,32 @@
+<template>
+  <js-child :str="`count: ${state.count}`" :bool="state.isZeroCount" :callback="increment" :arr="[1, 2]" />
+  <ts-child :str="`count: ${state.count}`" :bool="state.isZeroCount" :callback="increment" :arr="['a', 'b']" />
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, reactive, ref } from "vue";
+import JSChild from "./JSChild.vue";
+import TSChild from "./TSChild.vue";
+
+export default defineComponent({
+  components: {
+    JSChild,
+    TSChild
+  },
+  setup() {
+    const state: { count: number, isZeroCount: boolean } = reactive({
+      count: 0,
+      isZeroCount: computed(() => state.count === 0)
+    });
+
+    function increment() {
+      state.count++;
+    }
+
+    return {
+      state,
+      increment
+    };
+  }
+});
+</script>
\ No newline at end of file
diff --git a/test/vue3/fixture/diagnostics/propTypeValidation/ParentWrong.vue b/test/vue3/fixture/diagnostics/propTypeValidation/ParentWrong.vue
new file mode 100644
index 0000000000..5a3bcbec13
--- /dev/null
+++ b/test/vue3/fixture/diagnostics/propTypeValidation/ParentWrong.vue
@@ -0,0 +1,33 @@
+<template>
+  <js-child :str="state.count" :bool="state" :callback="state.isZeroCount" :arr="[1, 2]" />
+  <ts-child :str="state.count" :bool="state" :callback="state.isZeroCount" :arr="state.zeroToCount" />
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, reactive, ref } from "vue";
+import JSChild from "./JSChild.vue";
+import TSChild from "./TSChild.vue";
+
+export default defineComponent({
+  components: {
+    JSChild,
+    TSChild
+  },
+  setup() {
+    const state: { count: number, isZeroCount: boolean, zeroToCount: number[] } = reactive({
+      count: 0,
+      isZeroCount: computed(() => state.count === 0),
+      zeroToCount: computed(() => [...Array(state.count).keys()])
+    });
+
+    function increment() {
+      state.count++;
+    }
+
+    return {
+      state,
+      increment
+    };
+  }
+});
+</script>
\ No newline at end of file
diff --git a/test/vue3/fixture/diagnostics/propTypeValidation/TSChild.vue b/test/vue3/fixture/diagnostics/propTypeValidation/TSChild.vue
new file mode 100644
index 0000000000..606aad5621
--- /dev/null
+++ b/test/vue3/fixture/diagnostics/propTypeValidation/TSChild.vue
@@ -0,0 +1,18 @@
+<template>
+  <div></div>
+</template>
+
+<script lang="ts">
+import { PropType, defineComponent, ref, reactive } from "vue";
+
+export default defineComponent({
+  props: {
+    str: String,
+    bool: Boolean,
+    callback: {
+      type: Function as PropType<() => void>
+    },
+    arr: Array as PropType<string[]>
+  }
+});
+</script>
diff --git a/test/vue3/fixture/package.json b/test/vue3/fixture/package.json
index 68a534710a..011c1f44b0 100644
--- a/test/vue3/fixture/package.json
+++ b/test/vue3/fixture/package.json
@@ -1,5 +1,5 @@
 {
   "dependencies": {
-    "vue": "^3.0.0-rc.5"
+    "vue": "^3.0.0-rc.13"
   }
 }
diff --git a/test/vue3/fixture/shims-vue.d.ts b/test/vue3/fixture/shims-vue.d.ts
new file mode 100644
index 0000000000..798e8fcfac
--- /dev/null
+++ b/test/vue3/fixture/shims-vue.d.ts
@@ -0,0 +1,5 @@
+declare module '*.vue' {
+  import { defineComponent } from 'vue';
+  const component: ReturnType<typeof defineComponent>;
+  export default component;
+}
diff --git a/test/vue3/fixture/yarn.lock b/test/vue3/fixture/yarn.lock
index e623e5ab6f..7d1d07ee1b 100644
--- a/test/vue3/fixture/yarn.lock
+++ b/test/vue3/fixture/yarn.lock
@@ -7,72 +7,72 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.4.tgz#a78c7a7251e01f616512d31b10adcf52ada5e0d2"
   integrity sha512-3U9y+43hz7ZM+rzG24Qe2mufW5KhvFg/NhnNph+i9mgCtdTCtMJuI1TMkrIUiK7Ix4PYlRF9I5dhqaLYA/ADXw==
 
-"@babel/parser@^7.10.4":
-  version "7.10.5"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.10.5.tgz#e7c6bf5a7deff957cec9f04b551e2762909d826b"
-  integrity sha512-wfryxy4bE1UivvQKSQDU4/X6dr+i8bctjUjj8Zyt3DQy7NtPizJXT8M52nqpNKL+nq2PW8lxk4ZqLj0fD4B4hQ==
-
-"@babel/types@^7.10.4":
-  version "7.10.5"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.10.5.tgz#d88ae7e2fde86bfbfe851d4d81afa70a997b5d15"
-  integrity sha512-ixV66KWfCI6GKoA/2H9v6bQdbfXEwwpOdQ8cRvb4F+eyvhlaHxWFMQB4+3d9QFJXZsiiiqVrewNV0DFEQpyT4Q==
+"@babel/parser@^7.11.5":
+  version "7.11.5"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.11.5.tgz#c7ff6303df71080ec7a4f5b8c003c58f1cf51037"
+  integrity sha512-X9rD8qqm695vgmeaQ4fvz/o3+Wk4ZzQvSHkDBgpYKxpD4qTAUm88ZKtHkVqIOsYFFbIQ6wQYhC6q7pjqVK0E0Q==
+
+"@babel/types@^7.11.5":
+  version "7.11.5"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.11.5.tgz#d9de577d01252d77c6800cee039ee64faf75662d"
+  integrity sha512-bvM7Qz6eKnJVFIn+1LPtjlBFPVN5jNDc1XmN15vWe7Q3DPBufWWsLiIvUu7xW87uTG6QoggpIDnUgLQvPheU+Q==
   dependencies:
     "@babel/helper-validator-identifier" "^7.10.4"
     lodash "^4.17.19"
     to-fast-properties "^2.0.0"
 
-"@vue/compiler-core@3.0.0-rc.5":
-  version "3.0.0-rc.5"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.0.0-rc.5.tgz#dd4f1816fcae34a81bc60e584f97993cad284d54"
-  integrity sha512-dNz5AObEYg0Oglw3emIsBhTAOVfObrfxDaAzR0UTRDDq+Ohfr6KTSaVQAH88Ym+oa08ZlLZBFc6ARe9doAOIxg==
+"@vue/compiler-core@3.0.0-rc.13":
+  version "3.0.0-rc.13"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.0.0-rc.13.tgz#bec6812c4ce9e9b41210deaf8d05652feb50f1e5"
+  integrity sha512-bVtg7iilAE8uq+WvR4JN+vtzQWX+yjKHNG5Un0ar6M9WbphydGY9C0y1whKjRbKn/7U+evUh1MJ2hV2q3GBrSQ==
   dependencies:
-    "@babel/parser" "^7.10.4"
-    "@babel/types" "^7.10.4"
-    "@vue/shared" "3.0.0-rc.5"
+    "@babel/parser" "^7.11.5"
+    "@babel/types" "^7.11.5"
+    "@vue/shared" "3.0.0-rc.13"
     estree-walker "^2.0.1"
     source-map "^0.6.1"
 
-"@vue/compiler-dom@3.0.0-rc.5":
-  version "3.0.0-rc.5"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.0.0-rc.5.tgz#83905e8601123a3654b90fbd80708a16530ce21a"
-  integrity sha512-z8n+R1GhFnWuKURLYxfVSEfP7nSNM91qteobxwys55fhlZZuReouMnUwgrn+ois/IL6RdFlT9H+n4+N6yLrdJA==
+"@vue/compiler-dom@3.0.0-rc.13":
+  version "3.0.0-rc.13"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.0.0-rc.13.tgz#dc00b10c19a9d03a5302046de84daa5b1096d4cb"
+  integrity sha512-D0x6cZFiDfz+rcmWSgvgxjhVQOADMmQy7kcbft3u5nlTurZaztBNBz7pwHYi57/z3FjhzyclpDf0daOrRvph4A==
   dependencies:
-    "@vue/compiler-core" "3.0.0-rc.5"
-    "@vue/shared" "3.0.0-rc.5"
+    "@vue/compiler-core" "3.0.0-rc.13"
+    "@vue/shared" "3.0.0-rc.13"
 
-"@vue/reactivity@3.0.0-rc.5":
-  version "3.0.0-rc.5"
-  resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.0.0-rc.5.tgz#45cff8d839d7ad130b1e499239090050fdecff13"
-  integrity sha512-oe9C+1jtWUdYL/iNc0OPWbwgOk2rOW2uQ+exx3I6Jo6PKOmnAiPkMElalf9vRnO53rnUphVecMp8BlTJvcNgDw==
+"@vue/reactivity@3.0.0-rc.13":
+  version "3.0.0-rc.13"
+  resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.0.0-rc.13.tgz#3e7eebb438249a09b74b74e33d6a0e02970a000a"
+  integrity sha512-I4E9/3ZGejuNfUbpbgtWWDGas3qIGqqvjUeMEuDGbJfaUluZauSKXPRKjfGPz+esmgwvGAWjkcFeyyiYY4RSNQ==
   dependencies:
-    "@vue/shared" "3.0.0-rc.5"
+    "@vue/shared" "3.0.0-rc.13"
 
-"@vue/runtime-core@3.0.0-rc.5":
-  version "3.0.0-rc.5"
-  resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.0.0-rc.5.tgz#dd59af3a5fc089d1cdc05a657320c0dc17e5c362"
-  integrity sha512-MRIWreFigxdRuI2moFociUL5rVBfgYPrT7rWfQ0XfOyW46b+AiuCJyZvgbsRXwkAERfW1Tb/mY5forYjX2thOg==
+"@vue/runtime-core@3.0.0-rc.13":
+  version "3.0.0-rc.13"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.0.0-rc.13.tgz#e4ea95304aa33391696822c52b07a932fddf1d26"
+  integrity sha512-N5xGV6s/LaXybNt81XdBdil6exMoI1HPd0FeURnmhHfUizI41xq4yrWO+Yi44XO+R8xFcfxYECBaPqk0jPLgsg==
   dependencies:
-    "@vue/reactivity" "3.0.0-rc.5"
-    "@vue/shared" "3.0.0-rc.5"
+    "@vue/reactivity" "3.0.0-rc.13"
+    "@vue/shared" "3.0.0-rc.13"
 
-"@vue/runtime-dom@3.0.0-rc.5":
-  version "3.0.0-rc.5"
-  resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.0.0-rc.5.tgz#2fd75a1f29b23abf0ffe5ccdedabda11721c5b5b"
-  integrity sha512-0jwpO3MBqMToq7qC816Z8Y6G8aN4ZKbv7MupgRaepzxhiK0sXcjLQmOATP3g/NyX52UCBJS4wAwsxidqGnAabA==
+"@vue/runtime-dom@3.0.0-rc.13":
+  version "3.0.0-rc.13"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.0.0-rc.13.tgz#e82e67a4b099e7b8ec259693b79fadd525955d8a"
+  integrity sha512-o3Y9qlS3w8gqaj/vc99Z0DA2yETQFH8Q+qvxZstvRTEOYGEzxualIkBpCBXkPEXVSaing3Gbd4wso764RUZjkQ==
   dependencies:
-    "@vue/runtime-core" "3.0.0-rc.5"
-    "@vue/shared" "3.0.0-rc.5"
+    "@vue/runtime-core" "3.0.0-rc.13"
+    "@vue/shared" "3.0.0-rc.13"
     csstype "^2.6.8"
 
-"@vue/shared@3.0.0-rc.5":
-  version "3.0.0-rc.5"
-  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.0.0-rc.5.tgz#cea2378e3e37363ddc1f5dd158edc9c9b5b3fff0"
-  integrity sha512-ZhcgGzBpp+pUzisZgQpM4ctIGgLpYjBj7/rZfbhEPxFHF/BuTV2jmhXvAl8aF9xDAejIcw85xCy92gDSwKtPag==
+"@vue/shared@3.0.0-rc.13":
+  version "3.0.0-rc.13"
+  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.0.0-rc.13.tgz#2ec450daa7eae752da38da41a5b1c84056b10b7e"
+  integrity sha512-8zEVHmffW1P8Wlt8P63N+zKJrmzL6y0P2P6biWdl4CI9E5QVKlbOEYl7i+tU/dpa6oLj6nEzBxUCwA7UHvcPkw==
 
 csstype@^2.6.8:
-  version "2.6.11"
-  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.11.tgz#452f4d024149ecf260a852b025e36562a253ffc5"
-  integrity sha512-l8YyEC9NBkSm783PFTvh0FmJy7s5pFKrDp49ZL7zBGX3fWkO+N4EEyan1qqp8cwPLDcD0OSdyY6hAMoxp34JFw==
+  version "2.6.13"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.13.tgz#a6893015b90e84dd6e85d0e3b442a1e84f2dbe0f"
+  integrity sha512-ul26pfSQTZW8dcOnD2iiJssfXw0gdNVX9IJDH/X3K5DGPfj+fUYe3kB+swUY6BF3oZDxaID3AJt+9/ojSAE05A==
 
 estree-walker@^2.0.1:
   version "2.0.1"
@@ -80,9 +80,9 @@ estree-walker@^2.0.1:
   integrity sha512-tF0hv+Yi2Ot1cwj9eYHtxC0jB9bmjacjQs6ZBTj82H8JwUywFuc+7E83NWfNMwHXZc11mjfFcVXPe9gEP4B8dg==
 
 lodash@^4.17.19:
-  version "4.17.19"
-  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.19.tgz#e48ddedbe30b3321783c5b4301fbd353bc1e4a4b"
-  integrity sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ==
+  version "4.17.20"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
+  integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==
 
 source-map@^0.6.1:
   version "0.6.1"
@@ -94,11 +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@^3.0.0-rc.5:
-  version "3.0.0-rc.5"
-  resolved "https://registry.yarnpkg.com/vue/-/vue-3.0.0-rc.5.tgz#973175d45a892b3bd23ef5de7faa4add9c66275f"
-  integrity sha512-8t8Y4sHMBGD5iLZ7JfBGmKBJlzesPoL+/nW9EV8s+4LwnKC4rGlRp+Lj2rcign4iQaj0GFaL7DrQ8IoOfVX6+w==
+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"
+  integrity sha512-xCW8EAVSMdU7z+3BWBFV9hO36Tg6vN25fYN6agC6/z/3JlAyo0hVqQtqmGaDAHVlO110rPowfkGIWqStPhTdcw==
   dependencies:
-    "@vue/compiler-dom" "3.0.0-rc.5"
-    "@vue/runtime-dom" "3.0.0-rc.5"
-    "@vue/shared" "3.0.0-rc.5"
+    "@vue/compiler-dom" "3.0.0-rc.13"
+    "@vue/runtime-dom" "3.0.0-rc.13"
+    "@vue/shared" "3.0.0-rc.13"
diff --git a/test/vue3/index.ts b/test/vue3/index.ts
index 6d1bde09be..4a638a8284 100644
--- a/test/vue3/index.ts
+++ b/test/vue3/index.ts
@@ -3,12 +3,21 @@ import * as Mocha from 'mocha';
 import * as glob from 'glob';
 
 export function run(): Promise<void> {
-  // Create the mocha test
+  const args = {};
+
+  Object.keys(process.env)
+    .filter(k => k.startsWith('MOCHA_'))
+    .forEach(k => {
+      args[k.slice('MOCHA_'.length)] = process.env[k];
+    });
+
   const mocha = new Mocha({
     ui: 'bdd',
     timeout: 100000,
-    color: true
+    color: true,
+    ...args
   });
+
   const testsRoot = __dirname;
 
   return new Promise((c, e) => {
diff --git a/vti/src/cli.ts b/vti/src/cli.ts
index eac8c589bf..0585929c15 100644
--- a/vti/src/cli.ts
+++ b/vti/src/cli.ts
@@ -77,6 +77,15 @@ async function getDiagnostics(workspaceUri: URI) {
   const clientConnection = await prepareClientConnection(workspaceUri);
 
   const files = glob.sync('**/*.vue', { cwd: workspaceUri.fsPath, ignore: ['node_modules/**'] });
+
+  if (files.length === 0) {
+    console.log('No input files');
+    return 0;
+  }
+
+  console.log('Getting diagnostics from:');
+  console.log(files);
+
   const absFilePaths = files.map(f => path.resolve(workspaceUri.fsPath, f));
 
   console.log('');
@@ -132,10 +141,11 @@ async function getDiagnostics(workspaceUri: URI) {
     let workspaceUri;
 
     if (myArgs[1]) {
-      console.log(`Loading Vetur in workspace path: ${myArgs[1]}`);
-      workspaceUri = URI.file(myArgs[1]);
+      const absPath = path.resolve(process.cwd(), myArgs[1]);
+      console.log(`Loading Vetur in workspace path: ${chalk.green(absPath)}`);
+      workspaceUri = URI.file(absPath);
     } else {
-      console.log(`Loading Vetur in current directory: ${process.cwd()}`);
+      console.log(`Loading Vetur in current directory: ${chalk.green(process.cwd())}`);
       workspaceUri = URI.file(process.cwd());
     }
 
diff --git a/vti/src/initParams.ts b/vti/src/initParams.ts
index 3faa8c4dab..20d022b4c0 100644
--- a/vti/src/initParams.ts
+++ b/vti/src/initParams.ts
@@ -6,7 +6,8 @@ export const params = {
         validation: {
           template: true,
           style: false,
-          script: false
+          script: false,
+          templateProps: true
         },
         experimental: {
           templateInterpolationService: true