Multi-binding props and data shortcuts

syncState.ts

type PropName = string;
type DateName = string;

export type PropDataNames = [PropName, DateName];

export function syncState(...tuples: PropDataNames[]) {
  const watcher = {} as { [index: string]: (v: any) => void };

  for (const tuple of tuples) {
    const [propName, dataName] = tuple;
    watcher[dataName] = function (v: any) {
      const vm = this as any;
      vm.$emit("update:" + propName, v);
    };
    watcher[propName] = function (v: any) {
      let accessor = this as any;
      const nameChain = dataName.split(".");

      for (let i = 0; i < nameChain.length - 1; i++) {
        if (!accessor.hasOwnProperty(nameChain[i])) {
          return;
        }
        accessor = accessor[nameChain[i]];
      }
      if (accessor.hasOwnProperty(nameChain[nameChain.length - 1])) {
        accessor[nameChain[nameChain.length - 1]] = v;
      }
    };
  }
  return watcher;
}