diff --git a/test/interpolation/completion/class.test.ts b/test/interpolation/completion/class.test.ts
new file mode 100644
index 0000000000..7037b06f16
--- /dev/null
+++ b/test/interpolation/completion/class.test.ts
@@ -0,0 +1,116 @@
+import { activateLS, showFile, sleep, FILE_LOAD_SLEEP_TIME } from '../../lsp/helper';
+import { position, getDocUri } from '../util';
+import { testCompletion, testNoSuchCompletion } from './helper';
+import { CompletionItem, CompletionItemKind, MarkdownString } from 'vscode';
+
+describe('Should autocomplete interpolation for <template> in class component', () => {
+  const templateDocUri = getDocUri('completion/BasicClass.vue');
+  const parentTemplateDocUri = getDocUri('completion/ParentClass.vue');
+
+  before('activate', async () => {
+    await activateLS();
+    await showFile(templateDocUri);
+    await sleep(FILE_LOAD_SLEEP_TIME);
+    await sleep(FILE_LOAD_SLEEP_TIME);
+  });
+
+  const defaultList: CompletionItem[] = [
+    {
+      label: 'foo',
+      documentation: new MarkdownString('My foo').appendCodeblock(
+        `foo: {
+  type: Boolean,
+  default: false
+}`,
+        'js'
+      ),
+      kind: CompletionItemKind.Property
+    },
+    {
+      label: 'msg',
+      documentation: new MarkdownString('My msg').appendCodeblock(`msg = 'Vetur means "Winter" in icelandic.'`, 'js'),
+      kind: CompletionItemKind.Property
+    },
+    {
+      label: 'count',
+      documentation: new MarkdownString('My count').appendCodeblock(
+        `get count () {
+  return this.$store.state.count
+}`,
+        'js'
+      ),
+      kind: CompletionItemKind.Property
+    },
+    {
+      label: 'hello',
+      documentation: new MarkdownString('My greeting').appendCodeblock(
+        `hello () {
+  console.log(this.msg)
+}`,
+        'js'
+      ),
+
+      kind: CompletionItemKind.Method
+    }
+  ];
+
+  describe('Should complete props, data, computed and methods', () => {
+    it('completes inside {{ }}', async () => {
+      await testCompletion(templateDocUri, position(2, 7), defaultList);
+    });
+
+    it(`completes child component tag`, async () => {
+      await testCompletion(parentTemplateDocUri, position(4, 5), [
+        {
+          label: 'basic-class',
+          documentationStart: 'My basic tag\n```js\n@Component('
+        }
+      ]);
+    });
+
+    it(`completes child component's props`, async () => {
+      await testCompletion(parentTemplateDocUri, position(2, 18), [
+        {
+          label: 'foo',
+          documentation: new MarkdownString('My foo').appendCodeblock(
+            `foo: {
+  type: Boolean,
+  default: false
+}`,
+            'js'
+          )
+        }
+      ]);
+    });
+
+    it('completes inside v-if=""', async () => {
+      await testCompletion(parentTemplateDocUri, position(3, 23), defaultList);
+    });
+    it(`doesn't completes on the edge " of v-if=""`, async () => {
+      await testNoSuchCompletion(parentTemplateDocUri, position(3, 22), defaultList);
+    });
+    it(`doesn't completes on the edge " of v-if=""`, async () => {
+      await testNoSuchCompletion(parentTemplateDocUri, position(3, 24), defaultList);
+    });
+
+    it('completes inside @click=""', async () => {
+      await testCompletion(parentTemplateDocUri, position(3, 33), defaultList);
+    });
+    it(`doesn't completes on the edge " of @click=""`, async () => {
+      await testNoSuchCompletion(parentTemplateDocUri, position(3, 32), defaultList);
+    });
+    it(`doesn't completes on the edge " of @click=""`, async () => {
+      await testNoSuchCompletion(parentTemplateDocUri, position(3, 34), defaultList);
+    });
+
+    it('completes inside :foo=""', async () => {
+      await testCompletion(parentTemplateDocUri, position(3, 41), defaultList);
+    });
+    it(`doesn't completes on the edge " of :foo=""`, async () => {
+      await testNoSuchCompletion(parentTemplateDocUri, position(3, 40), defaultList);
+    });
+    it(`doesn't completes on the edge " of :foo=""`, async () => {
+      await testNoSuchCompletion(parentTemplateDocUri, position(3, 42), defaultList);
+    });
+  });
+});
diff --git a/test/interpolation/completion/property.test.ts b/test/interpolation/completion/property.test.ts
new file mode 100644
index 0000000000..8dd15df696
--- /dev/null
+++ b/test/interpolation/completion/property.test.ts
@@ -0,0 +1,110 @@
+import { activateLS, showFile, sleep, FILE_LOAD_SLEEP_TIME } from '../../lsp/helper';
+import { position, getDocUri } from '../util';
+import { testCompletion, testNoSuchCompletion } from './helper';
+import { CompletionItem, CompletionItemKind, MarkdownString } from 'vscode';
+
+describe('Should autocomplete interpolation for <template> in property class component', () => {
+  const templateDocUri = getDocUri('completion/BasicPropertyClass.vue');
+  const parentTemplateDocUri = getDocUri('completion/ParentPropertyClass.vue');
+
+  before('activate', async () => {
+    await activateLS();
+    await showFile(templateDocUri);
+    await sleep(FILE_LOAD_SLEEP_TIME);
+    await sleep(FILE_LOAD_SLEEP_TIME);
+  });
+
+  const defaultList: CompletionItem[] = [
+    {
+      label: 'foo',
+      documentation: new MarkdownString('My foo').appendCodeblock(
+        `@Prop({ type: Boolean, default: false }) foo`,
+        'js'
+      ),
+      kind: CompletionItemKind.Property
+    },
+    {
+      label: 'msg',
+      documentation: new MarkdownString('My msg').appendCodeblock(`msg = 'Vetur means "Winter" in icelandic.'`, 'js'),
+      kind: CompletionItemKind.Property
+    },
+    {
+      label: 'count',
+      documentation: new MarkdownString('My count').appendCodeblock(
+        `get count () {
+  return this.$store.state.count
+}`,
+        'js'
+      ),
+      kind: CompletionItemKind.Property
+    },
+    {
+      label: 'hello',
+      documentation: new MarkdownString('My greeting').appendCodeblock(
+        `hello () {
+  console.log(this.msg)
+}`,
+        'js'
+      ),
+
+      kind: CompletionItemKind.Method
+    }
+  ];
+
+  describe('Should complete props, data, computed and methods', () => {
+    it('completes inside {{ }}', async () => {
+      await testCompletion(templateDocUri, position(2, 7), defaultList);
+    });
+
+    it(`completes child component tag`, async () => {
+      await testCompletion(parentTemplateDocUri, position(4, 5), [
+        {
+          label: 'basic-property-class',
+          documentationStart: 'My basic tag\n```js\n@Component('
+        }
+      ]);
+    });
+
+    it(`completes child component's props`, async () => {
+      await testCompletion(parentTemplateDocUri, position(2, 27), [
+        {
+          label: 'foo',
+          documentation: new MarkdownString('My foo').appendCodeblock(
+            `@Prop({ type: Boolean, default: false }) foo`,
+            'js'
+          )
+        }
+      ]);
+    });
+
+    it('completes inside v-if=""', async () => {
+      await testCompletion(parentTemplateDocUri, position(3, 32), defaultList);
+    });
+    it(`doesn't completes on the edge " of v-if=""`, async () => {
+      await testNoSuchCompletion(parentTemplateDocUri, position(3, 31), defaultList);
+    });
+    it(`doesn't completes on the edge " of v-if=""`, async () => {
+      await testNoSuchCompletion(parentTemplateDocUri, position(3, 33), defaultList);
+    });
+
+    it('completes inside @click=""', async () => {
+      await testCompletion(parentTemplateDocUri, position(3, 42), defaultList);
+    });
+    it(`doesn't completes on the edge " of @click=""`, async () => {
+      await testNoSuchCompletion(parentTemplateDocUri, position(3, 41), defaultList);
+    });
+    it(`doesn't completes on the edge " of @click=""`, async () => {
+      await testNoSuchCompletion(parentTemplateDocUri, position(3, 43), defaultList);
+    });
+
+    it('completes inside :foo=""', async () => {
+      await testCompletion(parentTemplateDocUri, position(3, 50), defaultList);
+    });
+    it(`doesn't completes on the edge " of :foo=""`, async () => {
+      await testNoSuchCompletion(parentTemplateDocUri, position(3, 49), defaultList);
+    });
+    it(`doesn't completes on the edge " of :foo=""`, async () => {
+      await testNoSuchCompletion(parentTemplateDocUri, position(3, 51), defaultList);
+    });
+  });
+});
diff --git a/test/interpolation/fixture/completion/BasicClass.vue b/test/interpolation/fixture/completion/BasicClass.vue
new file mode 100644
index 0000000000..629d74923f
--- /dev/null
+++ b/test/interpolation/fixture/completion/BasicClass.vue
@@ -0,0 +1,45 @@
+<template>
+  <div>
+    {{  }}
+  </div>
+</template>
+
+<script>
+import Vue from 'vue'
+import Component from 'vue-class-component'
+
+/**
+ * My basic tag
+ */
+@Component({
+  props: {
+    /**
+     * My foo
+     */
+    foo: {
+      type: Boolean,
+      default: false
+    }
+  }
+})
+export default class BasicClass extends Vue {
+  /**
+   * My msg
+   */
+  msg = 'Vetur means "Winter" in icelandic.'
+
+  /**
+   * My count
+   */
+  get count () {
+    return this.$store.state.count
+  }
+
+  /**
+   * My greeting
+   */
+  hello () {
+    console.log(this.msg)
+  }
+}
+</script>
diff --git a/test/interpolation/fixture/completion/BasicPropertyClass.vue b/test/interpolation/fixture/completion/BasicPropertyClass.vue
new file mode 100644
index 0000000000..66408c7100
--- /dev/null
+++ b/test/interpolation/fixture/completion/BasicPropertyClass.vue
@@ -0,0 +1,40 @@
+<template>
+  <div>
+    {{  }}
+  </div>
+</template>
+
+<script>
+import Vue from 'vue'
+import { Prop, Component } from 'vue-property-decorator'
+
+/**
+ * My basic tag
+ */
+@Component()
+export default class BasicPropertyClass extends Vue {
+  /**
+   * My foo
+   */
+  @Prop({ type: Boolean, default: false }) foo
+
+  /**
+   * My msg
+   */
+  msg = 'Vetur means "Winter" in icelandic.'
+
+  /**
+   * My count
+   */
+  get count () {
+    return this.$store.state.count
+  }
+
+  /**
+   * My greeting
+   */
+  hello () {
+    console.log(this.msg)
+  }
+}
+</script>
diff --git a/test/interpolation/fixture/completion/ParentClass.vue b/test/interpolation/fixture/completion/ParentClass.vue
new file mode 100644
index 0000000000..eed414afd4
--- /dev/null
+++ b/test/interpolation/fixture/completion/ParentClass.vue
@@ -0,0 +1,48 @@
+<template>
+  <div>
+    <basic-class :></basic-class>
+    <basic-class v-if="" @click="" :foo=""></basic-class>
+    <
+  </div>
+</template>
+
+<script>
+import Vue from 'vue'
+import BasicClass from './BasicClass.vue'
+import Component from 'vue-class-component'
+
+@Component({
+  components: {
+    BasicClass
+  },
+  props: {
+    /**
+     * My foo
+     */
+    foo: {
+      type: Boolean,
+      default: false
+    },
+  }
+})
+export default class ParentClass extends Vue {
+  /**
+   * My msg
+   */
+  msg = 'Vetur means "Winter" in icelandic.'
+
+  /**
+   * My count
+   */
+  get count () {
+    return this.$store.state.count
+  }
+
+  /**
+   * My greeting
+   */
+  hello () {
+    console.log(this.msg)
+  }
+}
+</script>
diff --git a/test/interpolation/fixture/completion/ParentPropertyClass.vue b/test/interpolation/fixture/completion/ParentPropertyClass.vue
new file mode 100644
index 0000000000..f0756bcc13
--- /dev/null
+++ b/test/interpolation/fixture/completion/ParentPropertyClass.vue
@@ -0,0 +1,44 @@
+<template>
+  <div>
+    <basic-property-class :></basic-property-class>
+    <basic-property-class v-if="" @click="" :foo=""></basic-property-class>
+    <
+  </div>
+</template>
+
+<script>
+import Vue from 'vue'
+import BasicPropertyClass from './BasicPropertyClass.vue'
+import { Prop, Component } from 'vue-property-decorator'
+
+@Component({
+  components: {
+    BasicPropertyClass
+  }
+})
+export default class ParentClass extends Vue {
+  /**
+   * My foo
+   */
+  @Prop({ type: Boolean, default: false }) foo
+
+  /**
+   * My msg
+   */
+  msg = 'Vetur means "Winter" in icelandic.'
+
+  /**
+   * My count
+   */
+  get count () {
+    return this.$store.state.count
+  }
+
+  /**
+   * My greeting
+   */
+  hello () {
+    console.log(this.msg)
+  }
+}
+</script>
diff --git a/test/interpolation/fixture/package.json b/test/interpolation/fixture/package.json
index a7e71bf55e..5f741e5103 100644
--- a/test/interpolation/fixture/package.json
+++ b/test/interpolation/fixture/package.json
@@ -2,6 +2,7 @@
   "dependencies": {
     "vue": "^2.6.10",
     "vue-class-component": "^7.0.2",
+    "vue-property-decorator": "^8.2.1",
     "vue-router": "^3.0.6",
     "vuex": "^3.1.0"
   }
diff --git a/test/interpolation/fixture/yarn.lock b/test/interpolation/fixture/yarn.lock
index 0c10551f3d..9fd835ba10 100644
--- a/test/interpolation/fixture/yarn.lock
+++ b/test/interpolation/fixture/yarn.lock
@@ -2,11 +2,24 @@
 # yarn lockfile v1
 
 
+vue-class-component@^7.0.1:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/vue-class-component/-/vue-class-component-7.1.0.tgz#b33efcb10e17236d684f70b1e96f1946ec793e87"
+  integrity sha512-G9152NzUkz0i0xTfhk0Afc8vzdXxDR1pfN4dTwE72cskkgJtdXfrKBkMfGvDuxUh35U500g5Ve4xL8PEGdWeHg==
+
 vue-class-component@^7.0.2:
   version "7.0.2"
   resolved "https://registry.yarnpkg.com/vue-class-component/-/vue-class-component-7.0.2.tgz#c5f35a91c0e9341532392b84d606a84911fb13bc"
   integrity sha512-8xw/wkZI2tgHcwvkSRC1ax7GeP1CG27wKhedvOAdjdASm05VU4RijGsCYti6s6CzBioBL5BQUmntQQTCsp1wnQ==
 
+vue-property-decorator@^8.2.1:
+  version "8.2.1"
+  resolved "https://registry.yarnpkg.com/vue-property-decorator/-/vue-property-decorator-8.2.1.tgz#3791662033b20d20d098cb20e86fd23842982508"
+  integrity sha512-zgtcvzGB2JpDqnIxVhTK+6m+dv3uyhYs+tL8elL+DWiXj9kDonKcPY7f1DHYX1NlnWPCj7ht0nL/i8+S1gg76Q==
+  dependencies:
+    vue "^2.6.10"
+    vue-class-component "^7.0.1"
+
 vue-router@^3.0.6:
   version "3.0.6"
   resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.0.6.tgz#2e4f0f9cbb0b96d0205ab2690cfe588935136ac3"