One `observe` for all svelte needs.

svelte-observe.js

export function observe(key, callback, opts) {
  const single = !Array.isArray(key);
  const keypaths = single ? [ key ] : key;
  const parts = keypaths.map(keypath => keypath.replace(/\[(\d+)\]/g, '.$1').split('.'));
  const keys = parts.map(parts => parts[0]);
  const fn = callback.bind(this);

  let last = parts.map(parts => getNestedValue(this.get(), parts));

  if (!opts || opts.init !== false) {
    single ? fn(last[0], undefined) : fn(last, last.map(_ => undefined));
  }

  return this.on(
    opts && opts.defer ? 'update' : 'state',
    ({ changed, current, previous }) => {
      if (!previous) return; // prevent double-firing if observing in oncreate
      let i = keys.length;
      while (i--) {
        if (changed[keys[i]]) {
          let j = parts.length;
          const values = parts.map(parts => getNestedValue(current, parts));
          if (!values.every((value, i) => value === last[i])) {
            single ? fn(values[0], last[0]) : fn(values, last);
            last = values;
          }
          return;
        }
      }
    }
  );
}

function getNestedValue(obj, parts) {
  for (let i = 0; i < parts.length; i += 1) {
    if (!obj) return undefined;
    obj = obj[parts[i]];
  }

  return obj;
}