fix #699: bind component instance to computed metaInfo

examples/vue-router/Options.ts

@@ -1,6 +1,16 @@
-export default {
+import { defineComponent } from 'vue'
-  metaInfo: {
+
-    title: 'Title from Options API'
+export default defineComponent({
+  data () {
+    return {
+      title: 'Data Title'
+    }
+  },
+  metaInfo () {
+    const title = this.title
+    return {
+      title: title + ' from Options API'
+    }
   },
   template: '<div>This component uses the Options API</div>'
-}
+})

src/plugin.ts

@@ -21,7 +21,7 @@ export const createMixin: CreateMixin = options => ({
 
     const metaInfo = (instance.type as any)[options.keyName] as ComponentOptionsMetaInfo
     if (isFunction(metaInfo)) {
-      const computedMetaInfo = computed(metaInfo)
+      const computedMetaInfo = computed(metaInfo.bind(this))
       useMeta(computedMetaInfo)
     } else {
       useMeta(metaInfo)

src/types/options.ts

@@ -1,3 +1,5 @@
+import { ComponentOptionsMixin } from 'vue'
+
 export interface AttributeProperty {
     [key: string]: string | string[]
   }
@@ -129,4 +131,5 @@ export interface ComponentMetaInfo {
     noscript?: NoScriptProperty[]
   }
 
-export type ComponentOptionsMetaInfo = ComponentMetaInfo | (() => ComponentMetaInfo)
+// TODO: how to infer the real component options in this?
+export type ComponentOptionsMetaInfo = ComponentMetaInfo | ((this: ComponentOptionsMixin) => ComponentMetaInfo)