generic-mixin.ts

import Vue from 'vue';
import { ExtendedVue } from 'vue/types/vue';

export function cachedProp<T extends string>(
  origin: string,
  cached: T,
): ExtendedVue<
  Vue,
  Record<string, unknown>,
  Record<string, unknown>,
  { [P in T]: () => any },
  Record<string, unknown>
> {
  return Vue.extend({
    data() {
      return { [cached]: {} };
    },
    watch: {
      [origin]: {
        immediate: true,
        handler(n: Record<string, unknown>, o: Record<string, unknown>): void {
          if (o !== void 0) {
            for (const prop in o) {
              if (Object.prototype.hasOwnProperty.call(n, prop) !== true) {
                this.$delete(this[cached], prop);
              }
            }
          }

          for (const prop in n) {
            this.$set(this[cached], prop, n[prop]);
          }
        },
      },
    },
    // computed: {
    //   [cached]: function(): any {
    //     console.log('hoba!');
    //     return this[origin];
    //   },
    // } as any,
  });
}